Archived topic
How to Increase The Number of Images on a Row Under Featured Image for Products?
7 replies · Started by Georgi on March 2, 2022
Hello GP Team,
I noticed that the number of images on a row below the featured image on a product page is set to 4 and it looks great for mobile, but on dekstop it leaves some white space in which 2 more images can be put https://prnt.sc/5BMo1QpJn9H7
I don't know if this is in your competency but how can the number of the images on a row under the featured image be increased for dekstop?
Thanks in advance!
Hi there,
can you share a link to that product page ?
Hi,
Yes, I've put a link in the private area.
Try adding this CSS:
.woocommerce div.product div.images .flex-control-thumbs {
display: flex;
flex-wrap: wrap;
}
.woocommerce div.product div.images .flex-control-thumbs li {
flex: 1 0 100px;
}Thanks. This works awesome on dekstop!
However it misaligns the images on mobile and tablet. This is how it looked before https://prnt.sc/mJFlwJRrs0Tk This is how it looks now https://prnt.sc/TjFMCoRl_mCb
Can the effect of the CSS be limited only for dekstop?
Hi Georgi,
If you want the CSS only works on desktop, try add a media query to it:
@media (min-width: 769px) {
.woocommerce div.product div.images .flex-control-thumbs {
display: flex;
flex-wrap: wrap;
}
.woocommerce div.product div.images .flex-control-thumbs li {
flex: 1 0 100px;
}
}Works like a well oiled machine! :D Thanksss
No problem :)
