Can I make the Grid Gallery Block single column on mobile?

Hello. 

I have added a grid gallery block with 2 images and they work well for desktop but I would like to vertically stack them on mobile. I have tried searching for some code but nothing works. This would also need to be for the the whole blog.

Can anyone help? 

https://creative-people-2022.squarespace.com/projects/land-and-sea-website-ysn6w
pa33word

Add to Design > Custom CSS

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

@tuanphan Thank you so much, you're always so helpful!!

I have a couple of requests if that's OK.

1. Can we make this change apply to all of the blog?

2. Are we able to to reverse the image order if there are 2 images?

Thanks for your help 🙂

On 2/13/2023 at 3:23 AM, Claire_auck said:

@tuanphan Thank you so much, you're always so helpful!!

I have a couple of requests if that's OK.

1. Can we make this change apply to all of the blog?

2. Are we able to to reverse the image order if there are 2 images?

Thanks for your help 🙂

 

 

#1. Use this code

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

#2. Use this code

@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1675979023765_9864 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    height: auto !important;
}
#block-yui_3_17_2_1_1675979023765_9864 .sqs-gallery-block-grid .sqs-gallery-design-grid .slide {
    position: static !important;
    width: 100% !important;
}
#block-yui_3_17_2_1_1675979023765_9864 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    flex-direction: column-reverse;
}
}

Hi @tuanphan

Thank you for your help as always.

I just wanted to check something. I need all of the project pages to do this, so would i need injection code instead?

Many thanks
Claire.

On 2/16/2023 at 6:10 AM, Claire_auck said:

Hi @tuanphan

Thank you for your help as always.

I just wanted to check something. I need all of the project pages to do this, so would i need injection code instead?

Many thanks
Claire.

#1 or #2? Both need to add to Custom CSS

On 2/21/2023 at 8:29 PM, tuanphan said:

#1 or #2? Both need to add to Custom CSS

Hey @tuanphan

I need it for 1 & 2 for the whole portfolio.

Many thanks
Claire.

@tuanphan thank you so much for your help!
I will email you about some other small tweaks and get you to do a full check before the site goes live.

Thanks so much
Claire.