Dynamically resize multiple images to fit container

Solved
nagumi
Excursionist
43 1 15

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

Screenshot 2021-06-13 224942.png

KetanKumar
Shopify Partner
20534 2123 7748

This is an accepted solution.

@nagumi 

Sorry you are facing this issue, it would be my pleasure to help you.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.et_pb_blurb_description img {
    max-inline-size: 100% !important;
    width: 20%;
    object-fit: contain;
    padding: 8px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nagumi
Excursionist
43 1 15

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?

nagumi
Excursionist
43 1 15

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.

0 Likes
Lisabete
New Member
2 1 3

Hi can you help me

KetanKumar
Shopify Partner
20534 2123 7748

@nagumi 

great thanks for update 

can you please change value 20% to as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
20534 2123 7748

@Lisabete 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LitExtension
Shopify Partner
1228 157 217

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;

- Step 3: Add CSS for a tag: https://i.imgur.com/bpypOP2.png

Code: width: 100%;

- Step 4: Add CSS for img tag:https://i.imgur.com/ylMeU9R.png

Code: width: 100%;

If you do everything right, it will show like this: https://i.imgur.com/cCVsZ65.png

Hope it helps!

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes