how did you end up adjusting the headeR?
Thread Starter
Tanyad
(@tanyad)
I finally found the Custom CSS section which is hidden at the very bottom of Leaf Options. I put in the code
.site-header {padding: 0.0rem;}
.site-header img {padding: 0 0 0 00px;max-width:210%;float:left;}
as had been suggested on other posts (obviously I didn’t want any padding on my header) and it worked.
Note though, the header is no longer responsive on the mobile site, but oh well.
the header is no longer responsive on the mobile site
@tanyad You have to use media queries for the responsiveness.
Thread Starter
Tanyad
(@tanyad)
Thanks Tizz. I have no idea how to write those!
Replace
.site-header img {padding: 0 0 0 00px;max-width:210%;float:left;}
with
@media only screen and (min-width: 770px) {
.site-header img {padding: 0px;max-width:210%;float:left;}
}
(You may need to clear cache more than once before to see it in action)
Thread Starter
Tanyad
(@tanyad)
Hmm, didn’t work. 🙁 But thanks!
Thread Starter
Tanyad
(@tanyad)
Actually, classic case of PEBCAK.. have redone it and yes it works. Thanks again!
@tanyad, I noticed that in some screen resolution, e.g. 1366×768, your header is like this.
This issue is independent from the last code I gave you, but it depends on the header image, less large than the header size (in the demo of the theme this isn’t visible because is all white.)
I think that you get the CSS from an old topic of mine, but in my case the usage is different because I have a transparent background.
Maybe the quick solutions are two. One is to put an image of 1103px on the long side, after saving it for the web to keep it light as possible. The other is to add width:210%; to that code, this will stretch the image a little to cover the entire area, but I don’t know how it works with other resolutions. You can try what works better (different browsers and screen resolutions).
