Change image & text from Collage layout to Stack layout on Mobile only

Site URL: https://pentagon-snail.squarespace.com

I know there must be a way to do this but I can't find any threads on this topic!

As you'll see in the screenshot, the Collage layout doesn't look great on mobile. If possible, I want to switch the layout to Stack.

Thank you in advance for any guidance

Website password is: kerri2021

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .design-layout-collage .intrinsic {
    width: 100% !important;
    left: 0 !important;
}
body.homepage .design-layout-collage figcaption {
    width: 100% !important;
}
}

That worked perfectly, thank you so much.

@tuanphan I need to do the same on the About page of the site... what needs to change in the above css? Just the part about which page it's on?

On 12/5/2021 at 8:55 PM, hannahpellatt said:

@tuanphan I need to do the same on the About page of the site... what needs to change in the above css? Just the part about which page it's on?

Edit about page >> Add a Code Block under Collage Image Block >> paste this code

<style>
  @media screen and (max-width:767px) {
.design-layout-collage .intrinsic {
    width: 100% !important;
    left: 0 !important;
}
.design-layout-collage figcaption {
    width: 100% !important;
}
}
</style>