Mobile optimization for custom liquid icon section

Shopify Discussion

Topic summary

A user is experiencing mobile layout issues with a custom liquid icon section on their Shopify product page. The section displays correctly on desktop but misaligns on mobile devices.

Desired mobile layout:

  • First two icons on top row
  • Last two icons on bottom row
  • All icons properly aligned

Current code structure:

  • Custom liquid section with 4 icons (labeled VEGAN, NO REFINED SUGAR, DAIRY FREE, ETHICALLY SOURCED)
  • CSS using flexbox with space-between justification

Troubleshooting attempts:

  • Another user suggested adding flex-wrap: wrap to .custom-icon-section and a media query setting .icon to flex: 50% at max-width 900px
  • The original poster implemented these changes but reports the issue persists

Current status:

  • The discussion remains ongoing
  • The helper requested store URL and password via private message to investigate further
  • The original poster agreed to share details privately
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

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:

Icon 1

VEGAN

Icon 2

NO REFINED SUGAR

Icon 3

DAIRY FREE

Icon 4

ETHICALLY SOURCED

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 :slightly_smiling_face:

custom-section-liquid-desktop.png
custom-section-liquid-desktop.png1569×428 13.7 KB

custom-section-liquid-mobile.png
custom-section-liquid-mobile.png618×437 12.3 KB

2

@sirensiren

modify the css

.custom-icon-section {

flex-wrap:wrap;

}

@media (max-width:900px) {

.icon {

flex:50%;

}

}

1 Like
3

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?

4

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

5

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