Making icons inline with heading on mobile

Store Design

Topic summary

A user needed help aligning an icon and heading inline on mobile devices for a Shopify store section. They provided a screenshot showing the current layout and a preview link (password-protected).

Solution provided:

  • Custom CSS code targeting mobile screens (max-width: 749px)
  • Uses absolute positioning for the icon with adjusted padding
  • Reduces icon size to 20px for better mobile display
  • Code should be added via Customize > Theme settings > Custom CSS

Outcome: The solution was successfully implemented and resolved the alignment issue.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

On this site, in this section on mobile I’d like the icon and heading to be in line but can’t crack the code. pw is hello123

Screenshot 2025-10-08 at 1.19.38 pm
Screenshot 2025-10-08 at 1.19.38 pm794×1106 42.7 KB

Thank you!

1 Like
2

Hey @kirsten11123

The preview link which you shared is expired, can you share a new one?

Best,
Moeed

4
5

Hi @kirsten11123,

Please go to Customize > Theme settings > Custom CSS and add code:

@media only screen and (max-width: 749px) {
.section-columns .column__icon.icon--top {
    padding-left: var(--icon-size);
}
.section-columns .column__icon.icon--top .icon__animated {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
    --icon-size: 20px;
}
}

If I helped you, then a Like would be truly appreciated.

Best,
NamPhan

6

Legend, thank you! Perfect :slight_smile:

7

Hi @kirsten11123,

It’s my pleasure :blush: