Hi,
We’ve made a logo for our website. We’ve made it in a bigger size so the resolution is better. But it’s way to big to put in our header now. I’ve tried to resize in wordpress but that affects the resolution in a big way.
Is there a better way to resize the logo but keep the high resolution?
Hope somebody can help us out
Hi Koen
Try the following at Appearance > Custom CSS:
/* Logo */ #masthead .hgroup .logo img { height: auto; max-width: 120px; }Edit the max-width value as required.
Hi Andrew,
Thanks, I think this could work. I’ve got two questions though. I’ve set the code to:
/* Logo */#masthead .hgroup .logo img {height: auto;max-width: 35%;}So that the logo has the same (relative) size on every screen. On desktop and mobile it looks great. But when I make my browser a little bit smaller like tablet size the logo jumps back to it’s original size, this also happens when i set the max-width in px.
And I was wondering how this code works out on retina displays. Currently we only set the normal logo. Not retina. But since it’s relative I don’t think we will need I retina logo do we?
I’ve now also set the retina logo but I’m not sure what this does.
Retina logo is loaded for high definition displays like Apple Retina displays. Given what we’re doing I’d recommend leaving this field empty.
The logo gets bigger because after 1080 our CSS rules gets trumped by a more specific rule within a media query. Let’s be a little lazy and change our rule to:
/* Logo */ #masthead .hgroup .logo img { height: auto !important; max-width: 35% !important; }Thanks, that's already a lot better!
Only now on a small screen, like mobile, it gets a bit to small. Is that fixable?
You’d need to use a media query to set a different width:
/* Logo */ #masthead .hgroup .logo img { height: auto !important; max-width: 35% !important; } @media (max-width: 680px) { #masthead .hgroup .logo img { max-width: 80% !important; } }Thanks Andrew! Looks great now
Super :) Glad that helped.