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.
1

Our mobile header has broken. The phone icon has split onto another line and the basket icon is different to desktop.

Desktop icon: https://cdn.shopify.com/s/files/1/0401/8641/3217/files/cart_d61e3e8a-f93c-4055-a258-d466de1c14b2.png

Can anyone advise?

https://www.physioworldshop.co.uk/

image0 (4).jpeg
image0 (4).jpeg1170×1065 79 KB

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

3

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media only screen and (max-width: 749px){ .display-table-cell .sign-in-mobile img { bottom: 19px !important; } } @media only screen and (max-width: 768px){ span.sign-in-mobile a img { height: 30px; width: 30px; } .display-table-cell .sign-in-mobile img { bottom: 21px !important; } }

For Tablet:

techlyser_web_1-1704791110839.png
techlyser_web_1-1704791110839.png420×232 37.1 KB

For Mobile:

techlyser_web_0-1704791033765.png
techlyser_web_0-1704791033765.png232×229 22.9 KB