Mobile logo size

  • Resolved jekka12

    (@jekka12)


    4 years, 7 months ago

    Hi!

    The site logo on website is ok – position, size… but on mobile is toooo big and I’ve tried so many codes already that I think I will get crazy soon. It is too big and is on the left side, not in the center like you can see on pc.

    I’ve tried this code:
    .woocommerce-active .site-branding {
    width: 50%;
    }

    It’s fine and makes the logo smaller but at the same time header is getting smaller too.

    Also this one:
    .site-header .custom-logo-link img {
    max-width: 100px;
    }

    But it also change the desktop logo.

    I want the mobile menu look like the desktop menu, so logo will be between trees.
    Can anyone help me to solve this problem?

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

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

  • Hi, try the following

    @media screen and ( max-width: 568px ) {
  .site-header .site-branding {
    text-align: center;
    width: 100%;
  }

  .site-header .custom-logo-link {
    margin: auto;
    width: 100px;
  }
}
    Thread Starter jekka12

    (@jekka12)

    Hi, Jarret!

    Thank you for the reply. Your code does move logo to the center where it should be but header automatically is getting thinner. What to do with that?
    Thank you.

    You can add some height into the .site-branding one so something like 

    .site-header .site-branding {
    height: 75px;
    text-align: center;
    width: 100%;
  }
    Thread Starter jekka12

    (@jekka12)

    Thank you! Now is perfect!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile logo size’ is closed to new replies.