Claire_auck Posted February 9 Share Posted February 9 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 Link to comment
tuanphan Posted February 11 Share Posted February 11 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Claire_auck Posted February 12 Author Share Posted February 12 @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 🙂 Link to comment
tuanphan Posted February 15 Share Posted February 15 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Claire_auck Posted February 15 Author Share Posted February 15 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. Link to comment
tuanphan Posted February 21 Share Posted February 21 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Claire_auck Posted February 27 Author Share Posted February 27 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. Link to comment
Solution tuanphan Posted February 28 Solution Share Posted February 28 On 2/27/2023 at 7:18 AM, Claire_auck said: Hey @tuanphan I need it for 1 & 2 for the whole portfolio. Many thanks Claire. #1 will apply all #2. Change to this @media screen and (max-width:767px) { .gallery-block .sqs-gallery-block-grid .sqs-gallery-design-grid { height: auto !important; } .gallery-block .sqs-gallery-block-grid .sqs-gallery-design-grid .slide { position: static !important; width: 100% !important; } .gallery-block .sqs-gallery-block-grid .sqs-gallery-design-grid { display: flex; flex-direction: column-reverse; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Claire_auck Posted February 28 Author Share Posted February 28 @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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment