Jump to content

Side by side 'poster image' or regular image on mobile

Recommended Posts

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
  • Replies 6
  • Views 952
  • Created
  • Last Reply

@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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.