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 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 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 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 Block – Grid
Note: Replace the block ID in the code with your gallery block ID. Use this free tool to find the ID.
Use this code to the Custom CSS box
/* Gallery Block Grid */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1713542378104_55799 {
.slide {
width: 100% !important;
}
img {
width: 100% !important;
height: auto !important;
top: unset !important;
left: unset !important;
}
.content-fit {
padding-bottom: unset !important;
height: auto !important;
}}}
List Banner Slideshow
Use this code to the Custom CSS box
/* Break slideshow to Stacked */
@media screen and (max-width:767px) {
.slideshow-holder, .slideshow-gutter {
overflow: visible !important;
}
.user-items-list-banner-slideshow .slides {
display: block !important;
}
.user-items-list-banner-slideshow .slide {
transform: unset !important;
}}
