Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

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

By dabejar, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

dabejar Level 2

dabejar

Posted
Posted (edited)

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
  • Replies 3
  • Views 486
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

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!)

dabejar Level 2

dabejar

Posted
  • Author
Posted

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!

tuanphan Level 18

tuanphan

Posted
Posted
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!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources