[Resolved] Small problem centering logo on smartphone/tablet

[Hernan]

Hello, I have a small problem centering a logo on mobile devices. I’m centering with this snippet of code:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50% !important;
    transform: translatex(-50%);
}
#mobile-header .inside-navigation {
    justify-content: flex-end;
}

From 600px wide onwards it works perfectly without problems. But on mobile phones less than that the logo is moved to the right. The logo is not centered from 0px to 599px (most phones)

A temporary solution would be to place:

left: 45%

It works fine BUT as the width gets closer to 600 the logo will be noticeable to the left. It is not such a bad solution given that few phones are so wide or few tablets are so small (applying this solution the logo would be bad centered from 400px to 599px, I think there are few devices in this range)

But I would like to better understand the problem and maybe get closer to a more definitive solution. To my bad luck there is a white strip right in the center on mobile devices so the user can notice this small problem

What could I do? Why could this be happening?

Thank you !

Best regards

[Ying]

Hi there,

Just checked your site, and the logo is centred.

[Hernan]

The problem is difficult to perceive but if you go down a bit you can perceive it with the white space in the middle

The white bar should be near the end of the F

Applying left 45% is practically perfect but as I mentioned it has problems for resolutions between 400px to 599px

(I privately attach the url of the page with the temporary solution for comparison) Above 600px everything seems fine or according to the settings

[Ying]

The image itself it not well-cropped, can you try cropping the image and clear cache?
https://www.screencast.com/t/ZB3lLYHV

[Hernan]

Thanks for letting me know, I’ll fix it on the real web. But it is not enough to center the logo on mobile phone. I have centered the image and created a dotted line in the center of the logo to visualize the imbalance, I have also created a table with two columns to have a center line

It seems that I have problems centering all the images in logo responsive format. It must be an unintentional padding somewhere, so those 9px 10px errors are visible on small screens and especially in my case as a white vertical line is formed

[David]

Hi there,

you have this CSS:

@media (max-width: 768px) {
    .site-logo.mobile-header-logo {
        position: absolute;
        left: 50% !important;
        transform: translatex(-50%);
    }
}

change it to this:

@media (max-width: 768px) {
    .site-logo.mobile-header-logo {
        position: absolute;
        left: 50% !important;
        transform: translatex(-50%);
        margin-left: 0;
        margin-right: 0;
    }
}

It will remove the margins that are affecting the logo position.

[Hernan]

Works ! is now centered at all times

Thank you very very much

Kind regards

[David]

You’re welcome

[Author]

Posts