How to change gallery in carousel on desktop to stacked on mobile

Site URL: https://www.nestologystudio.com/portfolio/nakissa-jx753

Hi, for all my pages under the portfolio page https://www.nestologystudio.com/portfolio/ I wish to change gallery in carousel on desktop to STACKED on mobile.

If we can also hide the slideshow arrows on mobile as well.

Can kindly help? Thank you!

On 4/7/2022 at 12:23 PM, KeraG said:

Site URL: https://www.nestologystudio.com/portfolio/nakissa-jx753

Hi, for all my pages under the portfolio page https://www.nestologystudio.com/portfolio/ I wish to change gallery in carousel on desktop to STACKED on mobile.

If we can also hide the slideshow arrows on mobile as well.

Can kindly help? Thank you!

Add to Design > Custom CSS

/* Carousel to stacked */
@media screen and (max-width:767px) {
body#item-62270a75a830bf2812f73621 {
.sqs-block .sqs-intrinsic {
    padding: unset !important;
}

.sqs-block .sqs-intrinsic .sqs-intrinsic-content {
    position: static !important;
}

.sqs-gallery-design-strip {
    overflow: visible !important;
}

.sqs-gallery-design-strip .sqs-wrapper {
    left: unset !important;
    width: 100% !important;
}

div#block-yui_3_17_2_1_1646724779865_338326 {
    padding: 0 !important;
}}
}

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Carousel to stacked */
@media screen and (max-width:767px) {
body#item-62270a75a830bf2812f73621 {
.sqs-block .sqs-intrinsic {
    padding: unset !important;
}

.sqs-block .sqs-intrinsic .sqs-intrinsic-content {
    position: static !important;
}

.sqs-gallery-design-strip {
    overflow: visible !important;
}

.sqs-gallery-design-strip .sqs-wrapper {
    left: unset !important;
    width: 100% !important;
}

div#block-yui_3_17_2_1_1646724779865_338326 {
    padding: 0 !important;
}}
}

 

Thank you for this @tuanphan! Applied the code already. Images are stacked but images are too big, can kindly help me edit the code so the images fill up the mobile screen?

On 4/11/2022 at 8:27 AM, KeraG said:

Thank you for this @tuanphan! Applied the code already. Images are stacked but images are too big, can kindly help me edit the code so the images fill up the mobile screen?

Try this new code

/* Carousel to stacked */
@media screen and (max-width:767px) {
body#item-62270a75a830bf2812f73621 {
.sqs-gallery-design-strip-slide {
    width: 100% !important;
}
.sqs-block .sqs-intrinsic {
    padding: unset !important;
}

.sqs-block .sqs-intrinsic .sqs-intrinsic-content {
    position: static !important;
}

.sqs-gallery-design-strip {
    overflow: visible !important;
}

.sqs-gallery-design-strip .sqs-wrapper {
    left: unset !important;
    width: 100% !important;
}

div#block-yui_3_17_2_1_1646724779865_338326 {
    padding: 0 !important;
}}
}

On 4/15/2022 at 12:17 PM, tuanphan said:

Try this new code

/* Carousel to stacked */
@media screen and (max-width:767px) {
body#item-62270a75a830bf2812f73621 {
.sqs-gallery-design-strip-slide {
    width: 100% !important;
}
.sqs-block .sqs-intrinsic {
    padding: unset !important;
}

.sqs-block .sqs-intrinsic .sqs-intrinsic-content {
    position: static !important;
}

.sqs-gallery-design-strip {
    overflow: visible !important;
}

.sqs-gallery-design-strip .sqs-wrapper {
    left: unset !important;
    width: 100% !important;
}

div#block-yui_3_17_2_1_1646724779865_338326 {
    padding: 0 !important;
}}
}

 

I have the same requirement, but the above CSS doesn't work on my site (www.andykerrphotography.com/gallery) unfortunately. Any suggestions would be very welcome please. Thanks!

On 5/4/2022 at 12:00 AM, Andyjk said:

I have the same requirement, but the above CSS doesn't work on my site (www.andykerrphotography.com/gallery) unfortunately. Any suggestions would be very welcome please. Thanks!

Hi. Where is carousel?

If you mean how do you choose it, it's in the design tab of the image box. If you mean, where is it on my website, I've temporarily changed it to a stacked configuration until I can work out how to have stacked on mobile, and carousel on desktop.

On 5/6/2022 at 3:03 PM, Andyjk said:

If you mean how do you choose it, it's in the design tab of the image box. If you mean, where is it on my website, I've temporarily changed it to a stacked configuration until I can work out how to have stacked on mobile, and carousel on desktop.

You can enable it, we can check easier

if impossible, you can duplicate site & enable there

Hi,

On my page, I decided to use List Section Carousel to create image galleries. However, its biggest size (L) is still small for me, I would like images to appear bigger. Could you tell me if it is possible to achieve this? Maybe custom CSS? 

The page in question: AURA Dance Theatre - I want to be a Blossom of a Fern — Gabija Gaidjurgyte (password 'slaptazodis')

Thank you!