Changing Site Logo Size for Mobile/Tablet

Hello,

I wanted to make my site’s (thehoopandtheharm.com) logo bigger on the desktop version, and I was able to do that using CSS and setting the min-width. However, when I make the screen smaller (like on a tablet or phone), I want the site logo to resize and get smaller as well. How would I go about fixing it? I believe I’d do something with @media only screen and (max-width: ####) but I am not sure exactly what to do from there.

Hope I explained that well. Thank you!

Hello there,

yeah you’re right, you can use css media query to make your site displayed responsively. please try the css code below:

@media only screen and (max-width: 1024px){
  img.site-logo {
    min-width: 100%;
  }
}

Thanks! That did the trick for the most part. It does look a little too stretched with its current height, though. To fix that, do I just play around with that same query but use min-height?

not min-height but max-width

Got it. Thank you! Feel free to mark this as resolved.