Reduce logo size in mobile version

  • Unknown's avatar
    sophiakotullaname · Member ·

    Hi,

    I’m using the theme Twenty Seventeen and I’m facing a problem with the logo on my website http://www.burnout-praxis.com

    I realized that the website automatically switches to a smaller-sized mobile version when the browser window has a width of 750 px or less, even on my laptop. That’s fine.

    In this smaller-sized version, the font size of the website’s title is smaller, but the logo still has the same size, so that the logo – compared to the website title – is too big.

    Is there a CSS code I can use to tell WordPress: if the browser window has a width of 750 px or less, please downscale the logo to xyz pixel?

    Or is there another way to solve this?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    staartmees · Member ·

    Do not create duplicate threads! You’ll get an answer at your initial thread.

  • Unknown's avatar
    sophiakotullaname · Member ·

    What initial thread are you talking about? I never opened another thread on the same topic.

    There was another thread on the logo as well, but not on automatically reducing the size for the mobile version.

    Or do I overlook something?

  • supernovia · Staff ·

    Hi @staartmees, we actually prefer having two threads for two different questions — generally one thread per issue, and one issue per thread. While @sophiakotullaname does have a thread about a logo, it’s a few months old and closed now.

    I’ll take a look at the CSS issue…

  • supernovia · Staff ·

    @sophiakotullaname, layout changes can get complex: move one thing and something else shifts, and so on. So we generally don’t provide code for them:
    https://wordpress.com/support/css-support/

    I’d be happy to give you a head start though.

    First you’ll need to say this for mobile screens only, and for that you use an @media query. You’ll need to set a max width. Then you’ll need to figure out what sizing works best for each element of your logo. It would look something like this, but you’ll likely need to make adjustments and do some testing to ensure everything works as intended:

    @media screen and (max-width: 48em) {
  .custom-logo-link img {
     max-width: 40%;
  }
  .site-title {
     font-size: 1rem;
  }
  .site-description, .site-description a {
     font-size: .7rem !important;
     line-height: 1rem;
  }
}

    Here’s how to find your theme’s CSS so you have some basis for what to change:

    https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

    Just as one other idea, though, if your logo and site title always need to have a certain ratio in their sizing, you might need to include the title text in the logo, and then just make the logo box bigger so it fills the space.

    Good luck! And if you do need to hire a developer, I’d recommend asking here: https://wordpress.com/built-by-wordpress-com/

  • Unknown's avatar
    sophiakotullaname · Member ·

    @supernovia, wow, it works. Thank you so much!

  • The topic ‘Reduce logo size in mobile version’ is closed to new replies.