Center logo on mobile screen

  • Hi,

    I have read the one existing post about this, which is marked as resolved, but the original poster settled with the logo to the left in the end, so I don’t feel that was actually resolved.

    Of the two options available, I have the logo set to the left, with menu on the right.
    This is how I wish for desktop sized screens.

    However, on mobiles, I want the logo to sit in the center.

    I have tried the following custom css under Appearance > Theme Options:

    @media screen and (max-width: 780px){
.logo-side{
margin: 0 auto !important;
}
}

    also have tried:

    @media screen and (max-width: 780px){
.logo-side <strong>img</strong>{
margin: 0 auto !important;
}
}

    But neither work, and the logo remains float to the left.

    However, when I add the below, the logo is not displayed at all on mobile size screens.
    So this suggests to me that the class being used is correct, but I just cannot get it to work with centering.

    @media screen and (max-width: 780px){
.logo-side{
display: none !important;
}
}

    Can you please advise how to get the logo centered when on small mobile screens only?

    Thanks

Viewing 1 replies (of 1 total)
  • Shane

    (@richardkanes)

    Hi there.

    Thank you for writing in.

    You can try using this code.

    @media screen and (max-width: 480px)
#site-logo, .logo-top #site-logo {
    width: 80%;
    text-align: center;
}

    If this doesn’t work then, we may need your site url to inspect the code.

    Thanks.

Viewing 1 replies (of 1 total)
  • The topic ‘Center logo on mobile screen’ is closed to new replies.