dabejar Posted June 27, 2023 Posted June 27, 2023 (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! Edited June 27, 2023 by dabejar
Solution tuanphan Posted June 28, 2023 Solution Posted June 28, 2023 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; } } 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 Posted June 28, 2023 Author Posted June 28, 2023 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 Posted June 29, 2023 Posted June 29, 2023 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment