How to fix broken mobile header design?

[ChrisW3]

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/

[Moeed]

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:

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

Best Regards,
Moeed

[niraj_patel]

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:

For Mobile: