Mobile Website Logo Not Centered

[Pods10101]

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

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.header__heading-logo {
    right: 10px !important;
    position: relative;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[Pods10101]

hey there that still doesn't center it

as you can see it is slightly left

[Moeed]

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

<style>
@media screen and (max-width: 767px) {
.header__heading-logo {
    left: 5px !important;
    position: relative;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[Pods10101]

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

[Moeed]

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

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

Best Regards,
Moeed

[Pods10101]

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

[Moeed]

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

<style>
@media screen and (max-width: 767px) {
.header__heading-logo {
    left: 5px !important;
    position: relative;
}
.header__icons {
    left: 15px !important;
    position: relative !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[SM-WEB]

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

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

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

}