Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 8
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.