Hey Ethan,
You can use the following CSS to enlarge the logo:
.site-title img {
max-height: 999px;
max-width: 999px;
}
That will let the logo be up to 999px wide or tall, but you can reduce those values to limit the size the logo reaches.
Ben that works, except is there a way to set one size for larger browser size and a different size for smaller browser size? For example, I set it to 220px which worked perfectly for mobile, but then on desktop it’s too small.
Yea that can be done with the use of “media queries”. Here’s an example:
.site-title img {
max-height: 220px;
max-width: 220px;
}
@media all and (min-width: 600px) {
.site-title img {
max-height: 999px;
max-width: 999px;
}
}
That will set the logo to 220px by default. Then the media query following basically says, if the browser window is 600px or wider, use this CSS. The CSS inside the media query will override the 220px.
The end result is that the logo will be 220px wide on all devices unless the screen is 600px or wider, in which case it will then be up to 999px.
Awesome, works great! Thank you much!
