How to fix broken mobile header design?

Store Design
, ,

Topic summary

A mobile header layout issue has occurred where the phone icon wraps to a separate line and the cart icon displays differently than on desktop.

Problem Details:

  • Phone icon breaking onto new line on mobile
  • Cart icon inconsistency between desktop and mobile views
  • Images provided showing the broken mobile header

Proposed Solutions:
Two community members offered CSS fixes:

  1. Moeed’s approach: Add custom CSS code to theme.liquid file before the </body> tag (specific code appears corrupted in the thread)

  2. niraj_patel’s solution: Insert media query CSS targeting mobile (max-width: 749px) and tablet (max-width: 768px) breakpoints to adjust .sign-in-mobile img positioning with bottom: 19px !important and icon dimensions of 30px × 30px

Both solutions require editing the theme.liquid file through Online Store → Theme → Edit Code. Screenshots were shared showing expected mobile and tablet layouts. The issue remains unresolved as no confirmation of successful implementation has been posted.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
2

Hey @ChrisW3

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1704790165427.png
Moeed_0-1704790165427.png365×644 65.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed