Buy me a coffee

Gallery Slideshow to Stacked (Mobile)

Gallery Block – Slideshow

Use this code to the Custom CSS box

@media screen and (max-width: 767px) {
.sqs-gallery.sqs-gallery-design-stacked {
    display: grid;
    grid-template-columns: 1fr;
    position: static;
    height: auto !important;
    box-sizing: border-box;
    row-gap: 10px;
}
.sqs-gallery-design-stacked-slide {
    position: static !important;
    opacity: 1 !important;
}
.sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    object-fit: contain;
}
.sqs-gallery-thumbnails.sqs-gallery-design-strip {
    display: none;
}}

Gallery Slideshow To Stacked Mobile 01 Min

Gallery Section – Simple Slideshow

Use this code to the Custom CSS box

@media screen and (max-width:767px) {
.gallery-slideshow-item-img.content-fit {
    opacity: 1 !important;
}
figure.gallery-slideshow-item {
    position: relative !important;
    visibility: visible !important;
    margin-bottom: 10px;
}
.gallery-slideshow {
    height: auto !important;
}
.gallery-slideshow-wrapper {
    height: 100% !important;
}
.gallery-slideshow-list {
    position: static !important;
}
.gallery-slideshow-item img {
    position: static !important;
    visibility: visible !important;
      display: block !important;
}
.gallery-slideshow-controls {
    display: none !important;
  }
  .gallery-slideshow-item-src {
    opacity: 1 !important;
}
figcaption.gallery-caption.gallery-caption-slideshow {
    top: unset !important;
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.gallery-slideshow-item .gallery-slideshow-image-link {
    position: static !important;
}
  }

Gallery Slideshow Simple Slideshow Min

Gallery Section – Fullscreen Slideshow

Use this code to the Custom CSS box

/* Fullscreen SLideshow */
@media screen and (max-width: 768px) {
/*gallery slideshow*/
.gallery-fullscreen-slideshow {
    height: unset !important;
}
.gallery-fullscreen-slideshow-list {
    height: unset !important;
}
.gallery-fullscreen-slideshow-item {
    position: static !important;
    opacity: 1;
    visibility: visible;
}
.gallery-fullscreen-slideshow-item-src, .gallery-fullscreen-slideshow-item-img,
.gallery-fullscreen-slideshow-item-wrapper {
    position: static !important;
}
.gallery-fullscreen-slideshow-controls {
    display: none !important;
}}

Gallery Slideshow To Stacked Mobile 03 Min

Gallery Section – Reel

Use this code to the Custom CSS box

/* Reel */
@media screen and (max-width: 768px) {
/*gallery reel*/
.gallery-reel  {
    height: unset !important;
}
.gallery-reel-list, .gallery-reel-item-wrapper,
.gallery-reel-item-src, .gallery-reel-item img {
    position: static 
}
.gallery-reel-item {
    position: static;
    transform: unset !important;
    width: 100% !important;
    height: 100% !important;
}
.gallery-reel-item-src {
    opacity: 1;
}
.gallery-reel-controls {
    display: none 
}}

Gallery Slideshow To Stacked Mobile 04 Min