Jump to content

Change Gallery Photo Layout on Mobile Only

Go to solution Solved by tuanphan,

Recommended Posts

Hello!

Is there a way to display ALL (sitewide) of my gallery block photos in a single column on mobile only, even when my desktop display may be 2-3 columns? In other words, regardless of how many gallery photo columns my desktop view may have, I'd like mobile to always display them in one single column.

I don't know if this is relevant, but my site is soulflower.love and I use the gallery blocks for almost all of my blog posts.

Thank you so much in advance for your time 🙂

Link to comment
  • Replies 4
  • Views 634
  • Created
  • Last Reply

Top Posters In This Topic

My apologies for the delay - for some reason Squarespace isn't notifying me when I'm getting a reply.

Here is a link to a blog post where I use a gallery (scroll to the bottom, below text). It's currently 3 columns (3 photos) wide. I'd like to keep it this way on desktop, but change all gallery photos on mobile to 1 column (1 photo) wide:

https://soulflower.love/blog/molokai-medicine-woman

Here is another post for reference. This one has a mix of varying column sizes, which I would like to keep as is on the desktop, but again change to a universal single column on mobile.

https://soulflower.love/blog/-30-

Do you think this is possible?

Thank you so much!!

Link to comment
  • Solution
14 hours ago, soulflower said:

My apologies for the delay - for some reason Squarespace isn't notifying me when I'm getting a reply.

Here is a link to a blog post where I use a gallery (scroll to the bottom, below text). It's currently 3 columns (3 photos) wide. I'd like to keep it this way on desktop, but change all gallery photos on mobile to 1 column (1 photo) wide:

https://soulflower.love/blog/molokai-medicine-woman

Here is another post for reference. This one has a mix of varying column sizes, which I would like to keep as is on the desktop, but again change to a universal single column on mobile.

https://soulflower.love/blog/-30-

Do you think this is possible?

Thank you so much!!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.gallery-block .slide {
    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

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.