Mobile Website Logo Not Centered

Store Design
, , , ,
1

I made my website logo centered it shows correctly on the desktop version of the site, but on the mobile it is centered but it is slightly to the left. I think this has to do with the padding. Can anybody help me? Thanks!

My Website: www.gadget-pods.store

2

Hey @Pods10101

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-1728363149421.png
Moeed_0-1728363149421.png369Ă—659 112 KB

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

Best Regards,
Moeed

3

hey there that still doesn’t center it

as you can see it is slightly left

4

I see, you wanna move the logo to the right then. Try this code.

RESULT:

Moeed_0-1728363629120.png
Moeed_0-1728363629120.png368Ă—667 112 KB

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

Best Regards,
Moeed

5

okay I did that now the icons for the search and checkout are too close to the logo I want them away form the logo a bit

6

Add this css in your bottom of the base.css file-

@media screen and (max-width: 767px) {

.header__heading-logo {left: -15px !important;}

}

7

You can adjust the value of left and make it less than 5px to whatever suits you the best! :slightly_smiling_face:

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

Best Regards,
Moeed

8

what??? I said the logo for the search icon

9

Ah apologies for the confusion, remove the previous code which you have added so far and add this final code.

RESULT:

Moeed_0-1728364506236.png
Moeed_0-1728364506236.png369Ă—637 107 KB

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

Best Regards,
Moeed

10

Why I can’t see the code? Its blank for me.