Jump to content

Is it possible to have different settings for a gallery block on mobile compared to desktop?

Recommended Posts

I am using a simple gallery grid that has 3 images per row on desktop, but I would like to have them stacked on mobile (one image per row). They are too small to be shown next to each other on mobile. If I change the settings on the mobile version, it affects the desktop design as well. Is it possible to have different layouts on desktop vs mobile?

Link to comment
  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
On 9/13/2022 at 10:47 AM, mattjenkins said:

Hello @tuanphan

 

Im after the same solution. One column for Gallery Grid: Simple on Mobile:

https://arugula-ladybug-m8r2.squarespace.com/work

 

Matt

 

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !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
  • 1 year later...
On 9/17/2022 at 10:35 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

 

It seems that this no longer works with Squarespace 7.1. Any idea how to do it now?

It looks like the css is applied but is overwritten in <1s after reloading the page...

Link to comment
4 minutes ago, siba said:

It seems that this no longer works with Squarespace 7.1. Any idea how to do it now?

It looks like the css is applied but is overwritten in <1s after reloading the page...

Ah it does still work. I just need to exits the customs CSS window. 

Link to comment
On 4/29/2024 at 7:12 PM, siba said:

It seems that this no longer works with Squarespace 7.1. Any idea how to do it now?

It looks like the css is applied but is overwritten in <1s after reloading the page...

You can share link to page where you have problem, we can check problem easier

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.