Gallery view - need Carousel on Desktop, but Stacked on mobile

Site URL: https://www.andykerrphotography.com/gallery

I have a 7.0 site using the Basil template, part of the Brine family.

I want the gallery to show in Carousel mode when viewed on desktop, but in Stacked mode when viewed on mobile.

Does anyone know of a way to achieve this please?

Many thanks in advance for your help, Andy

Hi,

You can set Carousel on desktop, then we will give the code to make it stacked on mobile.

On 8/21/2022 at 2:09 AM, tuanphan said:

Hi,

You can set Carousel on desktop, then we will give the code to make it stacked on mobile.

Thanks for the advice. Have now set the gallery to carousel on desktop.

On 8/22/2022 at 3:14 PM, Andyjk said:

Thanks for the advice. Have now set the gallery to carousel on desktop.

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1578591267687_4923>div>div {
    position: static !important;
}
.sqs-gallery-design-strip .sqs-wrapper {
    width: 100% !important;
    position: static !important;
}
div#block-yui_3_17_2_1_1578591267687_4923 .sqs-gallery-design-strip-slide {
    width: 100% !important;
    height: auto !important;
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1578591267687_4923>div>div {
    position: static !important;
}
.sqs-gallery-design-strip .sqs-wrapper {
    width: 100% !important;
    position: static !important;
}
div#block-yui_3_17_2_1_1578591267687_4923 .sqs-gallery-design-strip-slide {
    width: 100% !important;
    height: auto !important;
}
}

Thanks so much tuanphan! This has definitely helped, but I now have a large block of banner colour (brown) after the last image on tablet and mobile. Is there a way to reduce this please? Also, ideally the tablet view would be the same as when viewed on desktop - is this possible please.

Thank you again for your help - it's hugely appreciated.

Regards, Andy

On 8/25/2022 at 10:59 PM, Andyjk said:

Thanks so much tuanphan! This has definitely helped, but I now have a large block of banner colour (brown) after the last image on tablet and mobile. Is there a way to reduce this please? Also, ideally the tablet view would be the same as when viewed on desktop - is this possible please.

Thank you again for your help - it's hugely appreciated.

Regards, Andy

Hi,

Try this new code

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1578591267687_4923>div>div {
    position: static !important;
}
.sqs-gallery-design-strip .sqs-wrapper {
    width: 100% !important;
    position: static !important;
}
div#block-yui_3_17_2_1_1578591267687_4923 .sqs-gallery-design-strip-slide {
    width: 100% !important;
    height: auto !important;
}
/* space under last image */
div#block-yui_3_17_2_1_1578591267687_4923>div {
    padding-bottom: 10% !Important;
}
}

On 8/28/2022 at 8:45 AM, tuanphan said:

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1578591267687_4923>div>div {
    position: static !important;
}
.sqs-gallery-design-strip .sqs-wrapper {
    width: 100% !important;
    position: static !important;
}
div#block-yui_3_17_2_1_1578591267687_4923 .sqs-gallery-design-strip-slide {
    width: 100% !important;
    height: auto !important;
}
/* space under last image */
div#block-yui_3_17_2_1_1578591267687_4923>div {
    padding-bottom: 10% !Important;
}
}

Thank you so much. This has solved the problem!