Header image not centered on mobile

  • Resolved SJBaily

    (@sjbaily)


    9 months ago

    Hi, I would like my header image to center (and I guess it would have to become smaller), when viewing the website on a mobile phone. I thought I had found the solution on another thread, but it did not do the trick although it was in a thread about centering header image like mine.

    @media (max-width: 580px) {

    .site-header > .site-logo {width: 100%;text-align: center;}

    .site-header.has-logo.has-title-and-tagline.has-menu .site-branding {margin-left: 0;width: 100%;max-width: none;}

    }

    I wonder if some of my other CSS is affecting this. Everything looks fine on desktop and tablet, at least in the tablet preview in the dashboard. I don’t own a tablet so cannot be certain. Thank you!

    The page I need help with: [log in to see the link]

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

  • Hi @sjbaily,

    Thank you for reaching out to us!

    I need more information. Could you provide a screenshot to your site’s header in your phone?

    You could use a free file sharing service to host your screenshot file and share its public link in your reply.

    Thread Starter SJBaily

    (@sjbaily)

    I hope this works. I used We Transfer file share. https://we.tl/XVVOR4Ye87

    It just shows that the logo/header image Sydney Jane Baily is off to the right. Thanks, Sydney

    Hi,

    Thank you for getting back along with requested screenshot.

    I just noticed that longer logo image needs additional CSS code to fix responsiveness issue.

    Add this simple CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media (max-width: 560px) {
  .site-header .site-logo {
    max-height: none;
    max-width: 100%;
  }
}
    Thread Starter SJBaily

    (@sjbaily)

    Wow! Thank you. It’s perfect.

    Thread Starter SJBaily

    (@sjbaily)

    Marking resolved.

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