Right, the header will crop to fit the screen, which is why you shouldn’t use it for a logo, just like in Twenty Thirteen. If you need a logo, you should add it to your site title via Custom CSS.
Right, thanks. Is there a support post somewhere explaining how to do that?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Do you know where the Custom CSS section is (assuming that it comes with your theme) ?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you still have the header image set can you try adding this Custom CSS:
.site-header .site-branding {
background-size: 100%;
}
It’s not great because you have a large white space in the header when the image resizes, but that’s inevitable with your logo’s dimensions.
Maybe you can as well load a taller logo for your mobile?
There are two CSS files included in the theme: style.css and rtl.css
I think the second one is something to do with adapting the theme for right-to-left languages…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If there’s no apparent section of the dashboard called “Custom CSS” or similar then you may not have it – try installing this plugin: http://wordpress.org/plugins/custom-css-manager-plugin
You can find its section of the dashboard to hold your CSS modifications: http://wordpress.org/plugins/custom-css-manager-plugin/screenshot-1.jpg?r=704634
Thanks, that worked – the whole logo now displays!
One additional problem, though: there is now a lot of white space below the logo that is unnecessary. Any ideas for how to fix that?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Could you have just the first 2 characters of your logo on mobile and the rest on larger screens?
E.g try this:
.site-header .site-branding {
background-size: 100%;
}
@media screen and (max-width: 420px) {
.site-header .site-branding {
background-image: url(http://snag.gy/lgY3k.jpg);
background-size: 80%;
}
}
Inserted the new code, but it hasn’t worked.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try this instead:
.site-header .site-branding {
background-size: 100%;
}
@media screen and (max-width: 420px) {
#masthead .site-branding {
background-image: url(http://snag.gy/lgY3k.jpg);
background-size: 80%;
background-position: center;
}
}
Has this been resolved? I tried the approach Andrew described. My logo looks fine on mobile except for a lot of white space just below it before the nav bar. My site is http://www.policyviz.com.
Thanks.
Yep, worked perfectly – thanks Andrew!