Jump to content

3-column gallery changing into 2-column on mobile

Go to solution Solved by Ziggy,

Recommended Posts


i've recently built my portfolio and there are some things that i can't perfect on my own.

i have 3 columns of pictures in the gallery on my main page but once you check the mobile, there are only 2 columns which leaves one odd picture at the end and in general gives a worse visual pairing than the desktop version.

any way i can fix that with css?

this is my page: https://patrycjahelenabielawska.squarespace.com/

thank you!

Link to comment
  • Solution

You could solve this in a few different ways, one way might be to add 3 more images, that way you have an even number so it would look better as a 2-wide grid, but also good as 3-wide. 

Another option would be to go to a 1-column on mobile or keep 3-columns on mobile, both can be achieved with CSS, and change the user experience in different ways. 3 will have very small images on mobile and leave some white space at the bottom, and 1 would create big images with a long scroll. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

i wanted to avoid adding extra pictures as i feel like this amount is just right to capture the essence and grouping these pictures in twos instead of threes alters the overall perception. but you make a good point that threes would be too small for a mobile screen, and definitely scrolling through 2 images at a time is better than scrolling through one. 

thank you for the input and giving me a fresh perspective. i will add extra row to compromise 



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.