Jump to content

Portfolio page - 3 images/image links in a row on mobile

Recommended Posts

I'm building a site with a portfolio section. On desktop, I have four images per row, but on mobile view it automatically switches to a "feed" with one image at a time/stacked on top of each other. I'm trying to adjust the CSS so that I can have at least three images per row even on mobile.

Through the forum I found the following code, which works for 2 images per row. I'm now trying to adjust it to show three images per row instead. However, If I simply change the number "repeat(3,1fr);" it works, but the images differs in size (see screenshot)

/* portfolio mobile */

@media screen and (max-width:767px) {

div#gridThumbs {

grid-template-columns: repeat(2,1fr);

}}

Any ideas?

 

URL: https://caterpillar-parrotfish-m9mk.squarespace.com/all-work
Password for site is AFLA



 

IMG_4485.PNG

IMG_4486.PNG

Edited by DangDang
wording of a sentence
Link to comment
  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.