Mobile optimization for custom liquid icon section

[sirensiren]

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 🙂

[kazi · Accepted solution]

@sirensiren 

modify the css

.custom-icon-section  {

flex-wrap:wrap;

}

@media (max-width:900px) {

.icon {

flex:50%;

}

}

[sirensiren]

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?

[kazi]

@sirensiren  Can you share the store URL if protected provide pass 

[sirensiren]

Hello, Kazi, I am sending you the details in private message, thank you