Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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;
}
This is an accepted solution.
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;
}
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.
great thanks for update
can you please change value 20% to as you like
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;
- 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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024