Logo is not centered on mobile

  • Resolved wonderingwhere

    (@wonderingwhere)


    8 years, 9 months ago

    Instead of the logo being off to the left side of the website, I’d like it to be in the middle of the website.

    I am able to center it on a laptop, but it is off centered when I look at it on mobile and tables. Here is the site:

    https://magicdroppings.com/

    Here is the code I am using now:

    .site-header .site-logo-anchor {
    position: absolute;
    top: 25px;
    left: 27%;

    }

    None of the other codes posted here for centering the logo work. How can I get my logo to stay in the middle of the page on all devices?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi wonderingwhere,

    Here’s a little trick to center absolute positioned elements:

    `.site-header .site-logo-anchor {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    }`

    This should keep the logo centered both on mobile devices and desktop browsers.

    I hope this helps ??
    – Maria Antonietta

    Thread Starter wonderingwhere

    (@wonderingwhere)

    Hi Maria Antonietta,

    That worked! I had to adjust the 50% to 57% and it is now centered on all devices.

    Thank you!

    Great, you’re welcome ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo is not centered on mobile’ is closed to new replies.