Solved

Mobile optimization for custom liquid icon section

sirensiren
Excursionist
41 0 8

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 🙂

 

custom-section-liquid-desktop.pngcustom-section-liquid-mobile.png

Accepted Solution (1)

kazi
Shopify Partner
558 86 107

This is an accepted solution.

@sirensiren 

modify the css

 

.custom-icon-section  {

flex-wrap:wrap;

}

@media (max-width:900px) {

.icon {

flex:50%;

}

}

Need help with SPEED OPTIMIZATION | THEME CUSTOMIZATION ? WhatsApp Email Skype: kof.bd

View solution in original post

Replies 4 (4)

kazi
Shopify Partner
558 86 107

This is an accepted solution.

@sirensiren 

modify the css

 

.custom-icon-section  {

flex-wrap:wrap;

}

@media (max-width:900px) {

.icon {

flex:50%;

}

}

Need help with SPEED OPTIMIZATION | THEME CUSTOMIZATION ? WhatsApp Email Skype: kof.bd

sirensiren
Excursionist
41 0 8

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
Shopify Partner
558 86 107

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

Need help with SPEED OPTIMIZATION | THEME CUSTOMIZATION ? WhatsApp Email Skype: kof.bd

sirensiren
Excursionist
41 0 8

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