I have icons at the bottom of every product page. What I’d like is to have them dynamically resize to fit the container so they all fit on one line. Different products have different images (and different numbers of images.
Any ideas on how to do this? Site is www.gumpel.co.il
Sorry you are facing this issue, it would be my pleasure to help you.
.et_pb_blurb_description img {
max-inline-size: 100% !important;
width: 20%;
object-fit: contain;
padding: 8px;
}
Kumar,
Thank you for the code! It does make the images resize dynamically, but they are still in two lines. How can I make all 7 images appear on one line, and 5 images for other products?
I tried to change the max size to “14%” (100/7) to fit all 7 and it works! Thank you so much Kumar!
One problem: for other products which have less icons (such as https://www.gumpel.co.il/products/evapo-rust-liquid) it still resizes them as if there’s 7 icons.
Maybe the best way is to set up a snippet which shows the icons depending on which ones I select?
For example, in the code for product A I put “include icons: gloves, msds, ecofriendly, madeinamerica” and it shows those 4 and dynamically resizes for 4 icons.
Hi can you help me
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi @nagumi ,
Please follow the steps:
Step 1: You need to add all the images with the a tag around it, it’s very important for the CSS to sync all. https://i.imgur.com/LJtl9Jf.png
Step 2: Add CSS for the outer div: https://i.imgur.com/CVjqm00.png
Code: width: 100%;display: flex;
Code: width: 100%;
Code: width: 100%;
If you do everything right, it will show like this: https://i.imgur.com/cCVsZ65.png
Hope it helps!
