Make WooCommerce images automatically resize onto one line

[anointedwebdesign]

Hello

I’m currently trying to fix an issue I’m having with the WooCommerce product image thumbnails.

I have used CSS to make the default images bigger (as they were far too small) however an issue I’m having is that as the images resize on different sized browsers (e.g mobile), it causes the images to stack beneath each other if they take up too much horizontal space.

What I would like to achieve is having the images at a default size (say 4.5em), but that the images dynamically resize so no matter how many images there are they will never exceed one line.

I see the images are configured in an ordered list (ol) so I thought if I could fix the height and width of the ol it might force the images to resize but each time I try they keep pushing out from the limits I’ve set. Here’s my CSS and a photo below:

/*This controls product image thumbanil ol size*/
.flex-control-nav.flex-control-thumbs ol {
    max-width: 100%;
  	max-height: 20%;
  	border: 2px solid white;
}

/*This controls product thumbnail size*/
.flex-control-nav.flex-control-thumbs img {
    height: auto;
  	width: auto;
  	border: 2px solid white;

[lely]

Hello Callum,

On that case, we need to use media queries. Add this too:

@media (max-width: 980px) {
.flex-control-nav.flex-control-thumbs img {
    width: 4em; /*Adjust this values accordingly to your preferred size on 980 screen width*/
}
}
@media (max-width: 480px) {
.flex-control-nav.flex-control-thumbs img {
    width: 3em; /*Adjust this values accordingly to your preferred size on 480 screen width*/
}
}

CSS inside media queries will control the size of the thumbnail on the specified screen size.

Hope this helps.

[anointedwebdesign]

Hi Lely

Thanks for that. I’ve successfully resized according to breakpoints, however I have noticed that at around 750px the thumbnails push out from the entire image itself - it appears to be when the page goes from 2 columns to 1. Not sure if this is a known bug or not as I don’t think it’s related to the css I’ve added - I have commented out all the global CSS changes and the bug is still there.

Here’s a screenshot below:

[jade]

Hi Callum,

Please provide us a link to a product page so that we can check your setup and provide you with the code suggestion since you have several licenses in your account.

Thank you.

[anointedwebdesign]

Hi Jade

As suspected, this is a bug in the theme itself. I have checked out the demo page for WooCommerce on the Renew stack and you can see the same problem occurs - at a screensize between 718 - 767 the thumbnails push out from the container of the image. As stated before, this is also when the page scales from 2 columns to 1.

https://demo.theme.co/shop-renew/product/bucky/

I think you may have to apply a fix in the next update of pro, but here is my product link as requested anyway:

Custom Pantry Labels - Organise Life

Thank you

[christian]

Hey Callum,

This is not a bug. You will need to use high resolution images for your Main Image and Thumbnail in Appearance > WooCommerce. Try 1000 for the Main Image and 800 for Thumbnail.

Make sure there is no other plugin affecting the WooCommerce Images. You might also need to force regenerate the images if my suggestion doesn’t work.

Hope that helps.

[anointedwebdesign]

Hi Lely

I actually found an easier way to force resize so the images never exceed one line using flexbox. Here’s the code below

/*This controls product thumbnail size according to screen size */
.flex-control-nav.flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
  	}

.flex-control-nav.flex-control-thumbs img {
    width: 6em;
  	height: auto;
    border: 2px solid white;
}

[ruenel]

Hello Callum,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.