Jump to content

Searching for 2 column portfolio mobile view for Jasper Jin Squarespace 7.0

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I've got an in progress site where trying to figure out how to get the Jasper Jin template to display two column grid view on mobile phones. It currently just stacks the images one on top of the other. I've found css code for this online but I'm not able to get to work on mine. Any help would be greatly appreciated.

Thanks!

 

Screenshot 2023-06-27 at 5.13.10 PM.png

Edited by dabejar
Link to comment
  • Replies 3
  • Views 347
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:767px) {
.index-list.clearfix {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
}
.index-list.clearfix:before {
    display: none;
}
.index-list.clearfix>div {
    padding: 0 !important;
}
}

image.thumb.png.0eda1590e1fc5ab9363471ecd73a3a86.png

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

Thank you tuanphan! This worked, but I would ideally like the images in the 2 columns to match the horizontal images from the sites home page. Is there a way to adjust the height of the images in the columns from being tall vertical images to horizontal images that are not cropped?

Thank you again in advance!

Link to comment
20 hours ago, dabejar said:

Thank you tuanphan! This worked, but I would ideally like the images in the 2 columns to match the horizontal images from the sites home page. Is there a way to adjust the height of the images in the columns from being tall vertical images to horizontal images that are not cropped?

Thank you again in advance!

Can you share link to your site?

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.