Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


thiscitymaps

Question

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
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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