Make Logo Larger

Something like this might work:

@media only screen and (min-width: 90.063em) {
  .home .site-logo {
    max-width: 500px;
  }
}

I wrapped the CSS declaration in a media query so it only affects larger screens, using the breakpoint specified in the theme’s stylesheet for large screens.

You can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Let me know how it goes.

That doesn’t seem to be changing the size at all, unless I’m forgetting to purge a cache somewhere, but it is good to know the breakpoint the theme uses without having to dig through he stylesheet so I can maybe play around with what will enlarge the logo. I will update here if I figure out what styles need to be overridden.

Hmm. It works for me.

The CSS I gave you isn’t quite the same as what I see on your site.

What I provided:

@media only screen and (min-width: 90.063em) {
  .home .site-logo {
    max-width: 500px;
  }
}

What you have in your child theme:

@media only screen and (min-width: 90.063em) {
  .home .site-logo {
    width: 50%;
  }
}

Also, are you sure your test screen is large enough to trigger the CSS? To test this, lower the min-width to another value. You can also use a pixel value instead of ems, say 1024px.

Thanks, I was playing with what you gave me and ended up leaving it wrong I think. It’s working great now though thanks for the help.

Great, I’m glad you’re all set. I’ve marked this thread as resolved.