Small logo gets enlarged in the header

  • Resolved boppar

    (@boppar)


    3 years, 10 months ago

    Hi.
    I have a problem with the logo size in the header.

    I was using a logo with the size 230×142. It looked like this:
    https://ibb.co/G5TcxFK

    Now I want to change to a smaller logo with the size 151×111, bit it gets enlarged to 230×169, looking like this.
    https://ibb.co/JcSWt3H

    How can I solve the problem so the logo shows in the smaller size?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter boppar

    (@boppar)

    Just adding sitename in case it wasn’t obvious by the screenshots.

    Site:
    https://ibb.co/VJSB8rS

    Thread Starter boppar

    (@boppar)

    I’m trying to figure out why the logo is getting enlarged.

    The first image had the real size 231x143px and got scaled to 230x142px.

    The second image has the size 151x111px and gets scaled to 230x169px.

    Somehow it seems like WP insist to have a logo width of 230px. Why is that and how can this be changed?

    Thread Starter boppar

    (@boppar)

    I found something that seems to work:
    I add in customize CSS:
    @media screen and (min-width: 768px) {
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link, .site-header .custom-logo-link {
    width: 19%; /* Adjust this percentage up or down to make the logo larger or smaller. */
    }
    }

    This way my logo becomes smaller.
    The new logo with the size 151×111 only gets scaled to 149x110px.

    I know very little about coding so I’m not sure this is the right way to do it.

    Unfortunately there occured a new problem. The logo size on mobile view got even larger.

    Is there any code I can add to make the logo size on mobile view smaller?

    Hi there,

    Usually, the width of the logo is dependent on the container in which it is placed and the size of that varies between devices.

    In order to force a width of 151px for the logo on mobile devices, you could use the following custom CSS:

    
@media (max-width: 599px) {
  .site-header .custom-logo-link img {
    width: 151px !important;
  }
}
    Thread Starter boppar

    (@boppar)

    Hi @riaanknoetze
    Thanks a lot for your help, very appreciated.
    It worked fine.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Small logo gets enlarged in the header’ is closed to new replies.