thiscitymaps Posted July 9, 2020 Share Posted July 9, 2020 Site URL: https://www.thiscitymaps.com/ I have been using the code below to get my grid images side by side on mobile and it has been working perfectly . My question is how do I modify this to work for regular images or poster images (image with text link on top)? @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 5px; grid-row-gap: 5px; } } Link to comment
tuanphan Posted July 9, 2020 Share Posted July 9, 2020 Can you share link to page where you use poster image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
thiscitymaps Posted July 9, 2020 Author Share Posted July 9, 2020 @tuanphan https://www.thiscitymaps.com/shop Right now I have it set up as a grid and you have to click on the image to go to the category to shop. The only option with a grid is to have captions below the images and it just doesn't look great. I want to set it up as Images - not in a grid from squarespace, but by manually placing them side by side - Images with the poster option for text so that I can have people click on the text on top of the image to go to that category page.. if that makes sense. Link to comment
tuanphan Posted July 9, 2020 Share Posted July 9, 2020 I see 2 items/row here? Can you share link to exact page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
thiscitymaps Posted July 9, 2020 Author Share Posted July 9, 2020 @tuanphan I apologize - I only had one at the bottom for the time being. I added a TEST image now at the bottom - on web view they are side by side but on mobile it switches to one per row. I'd like to keep it to two per row no matter what the screen width. https://www.thiscitymaps.com/shop Link to comment
tuanphan Posted July 9, 2020 Share Posted July 9, 2020 9 minutes ago, thiscitymaps said: @tuanphan I apologize - I only had one at the bottom for the time being. I added a TEST image now at the bottom - on web view they are side by side but on mobile it switches to one per row. I'd like to keep it to two per row no matter what the screen width. https://www.thiscitymaps.com/shop Gift box & Test images? Add to Home > Design > Custom CSS @media screen and (max-width:991px) { div#page-section-5f048c0bfc15123032b87868 .span-12>.row>.col { width: 50% !important; float: left !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
thiscitymaps Posted July 9, 2020 Author Share Posted July 9, 2020 @tuanphan Yes! Thank you so very much!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.