All things Shopify and commerce
Hello to the wonderful Shopify Community out there! I have a problem and I could use some help!
I tried to create a custom icons section for my product page, using the custom liquid feature, and as you can see below, in desktop mode it appears ok, but on mobile it doesn't appear well-aligned. On mobile, I want the first two icons to appear on top, and the last two icons on the bottom, in a row and well-aligned. How can I achieve this? I am copying and pasting the code I used below:
CUSTOM LIQUID CODE:
<div class="custom-icon-section">
<div class="icon">
<!-- Icon 1 -->
<img src="https://cdn.shopify.com/s/files/1/0609/7302/3284/files/icon_1.svg?v=1696363390" alt="Icon 1">
<p class="icon-description">VEGAN</p>
</div>
<div class="icon">
<!-- Icon 2 -->
<img src="https://cdn.shopify.com/s/files/1/0609/7302/3284/files/icon2.svg?v=1696363133" alt="Icon 2">
<p class="icon-description">NO REFINED SUGAR</p>
</div>
<div class="icon">
<!-- Icon 3 -->
<img src="https://cdn.shopify.com/s/files/1/0609/7302/3284/files/icon_3.svg?v=1696363091" alt="Icon 3">
<p class="icon-description">DAIRY FREE</p>
</div>
<div class="icon">
<!-- Icon 4 -->
<img src="https://cdn.shopify.com/s/files/1/0609/7302/3284/files/icon_4.svg?v=1696363091" alt="Icon 4">
<p class="icon-description">ETHICALLY SOURCED</p>
</div>
</div>
CUSTOM CSS:
.custom-icon-section {display: flex; justify-content: space-between; align-items: center; }.icon {text-align: center; flex: 1; padding: 10px; }.icon img {max-width: 100px; }.icon-description {color: #433933;
If you have to propose a different approach to this issue all together, I am open to suggestions! If you also have a better code I could use to achieve this, I will be happy to try it!
Any help will be greatly appreciated 🙂
Solved! Go to the solution
This is an accepted solution.
modify the css
.custom-icon-section {
flex-wrap:wrap;
}
@media (max-width:900px) {
.icon {
flex:50%;
}
}
Dear Kazi, thank you for your help! Unfortunately, it doesn't resolve this issue. Now, after the modifications you suggested, my CSS code is as follows:
.custom-icon-section {display: flex; justify-content: space-between; align-items: center; }.icon {text-align: center; flex: 1; padding: 10px; }.icon img {max-width: 100px; }.icon-description {color: #433933;
.custom-icon-section {
flex-wrap:wrap;
}
@media (max-width:900px) {
.icon {
flex:50%;
}
}
Do you find something wrong with it? Could you suggest a different approach?
Hello, Kazi, I am sending you the details in private message, thank you
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024