Image thumbnails bleed into other columns on mobile

  • Resolved animesaulo

    (@animesaulo)


    4 years ago

    On collection pages, products with image thumbnails bleed into the next column when viewed on mobile and tablet.

    Example: https://pikadude.com/collections/pokemon/

    I reviewed the code and the culprit seems to be this CSS:

    
.css-vuyrge-thumbnailsWrapperCSS {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    gap: 0px 15px;
    margin-top: 12px;
    max-width: 410px;
}

    When I change the column to 4 in the inspector it looks great on tablet and 3 looks good on mobile.

    This happens for the free and pro version. What CSS can I add to my theme to fix this?

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @animesaulo Hey there,

    Try adding this CSS to your WP theme:

    
@media (max-width: 1030px) {
   .wps-thumbnails-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      gap: 0px 8px;
   }
}
    Thread Starter animesaulo

    (@animesaulo)

    Hey @andrewmrobbins , I appreciate the reply. Unfortunately, I’ve added the CSS provided and it’s not fixing the issue.

    Example: https://pikadude.com/collections/pokemon/

    Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @animesaulo Try this CSS instead:

    
@media (max-width: 1030px) {
   .wps-thumbnails-wrapper {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important;
      -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
      gap: 0px 8px !important;
   }
}
    Thread Starter animesaulo

    (@animesaulo)

    Thanks @andrewmrobbins I’ve updated the CSS with the one provided:

    It looks much better. But, for some reason, when I view the website on my iPhone 11 there is no gap between the images. Is this just on my end. I even updated your CSS code from “gap” to “grid-gap” and that didn’t work.

    Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @animesaulo How about this? Any better?

    @media (max-width: 1030px) {
   .wps-thumbnails-wrapper {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important;
      -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
      gap: 0px 8px !important;
   }

   .wps-thumbnails-wrapper .wps-product-image {
      width: 45px;
      height: 45px;   
   }

}
    Thread Starter animesaulo

    (@animesaulo)

    @andrewmrobbins I’ve updated the CSS code as specified and still no gap viewing on iPhone. And now it looks odd because the thumbnails that gets selected is 45px by 45px while the other images are 58px 58px.

    Thread Starter animesaulo

    (@animesaulo)

    Hey @andrewmrobbins I did a bit of research on this. From what I gather, I don’t think using flex with gap is supported on iOS yet. At least that what I read here:

    Looks look grid with gap is supported on iOS though.

    Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @animesaulo Thanks for the info, I’ll take a closer look soon.

    Thread Starter animesaulo

    (@animesaulo)

    Hey @andrewmrobbins Just wanted to follow up on this topic and check on the status.

    Plugin Author andrewmrobbins

    (@andrewmrobbins)

    @animesaulo Apologies for the delay!

    I have this fixed and will be pushing out a plugin update soon. Look out for version 3.6.0.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Image thumbnails bleed into other columns on mobile’ is closed to new replies.