• tfrett

    (@tfrett)


    Hello,
    How can I shrink my logo size so it’s smaller on a computer screen but stays the same on a mobile screen?
    Thanks so much!

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jarret

    (@jarretc)

    You can add the following to Appearance->Customize->Additional CSS

    @media screen and (min-width: 768px) {
        .site-header .inner-wrap .custom-logo-link img {
            width: 500px;
        }
    }

    You can adjust both of the 768px and 500px values.

    The 768px value is the minimum browser width that the logo will be resized on. So with the example code, any browser width wider than 768px will set the logo to 500px wide.

    Thread Starter tfrett

    (@tfrett)

    Thank you, Jarret! It worked.

    Thread Starter tfrett

    (@tfrett)

    Sorry, one more thing – is there a way to make the width of the actual header space smaller where the logo is? There’s a lot of empty space I would like to get rid of above my categories and below my top menu.

    Jarret

    (@jarretc)

    Hi, not quite sure what you mean by making the width smaller. The width of the header space is entirely dependent upon the width of the browser window.

    What do you want to fill up the empty space with?

    Thread Starter tfrett

    (@tfrett)

    Hello!
    I just want the extra white space above and below my logo to be less.

    Jarret

    (@jarretc)

    Ah yes, for that you can use the following

    .site-header .navbar-brand-wpz {
        margin: 0px;
    }
    Thread Starter tfrett

    (@tfrett)

    Perfect! Thank you!

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