Hi guys
the header I have gets cropped when I open a blog post to read- fine when the site is full width. I have uploaded Genesis responsive header plug in but it doesn’t seem to work.
I am not sure how to edit code (where to find it) so am a novice in that regard.
You’ll have to experiment a couple different ways since you’re using a wide logo. You can try adding background-size: contain !important; to your #header (around line 2803 in the blue section or wherever you want) and that would sort of resize it when you adjust your browser. Give that a try first.
I would recommend using a smaller version of the logo when accessed by a mobile device/browser because the logo you have will probably be too small to see.
Thanks Wes – will give it a go. I am by no means a coder so will see if I can figure out putting the code in (and hope I don’t mess up the site!)
I’ll also check out the tutorial, I’ve really struggled with headers so I suspect I’ll learn something.
Hi Wes, no idea if this is right. I went to the CSS part of the site and added the code under the header section so it looks like this now:
#header {
color: #aaa;
margin: 0 auto;
overflow: hidden;
padding: 5px 0;
padding: 0.3125rem 0;
max-width: 1152px;
background-size: contain !important;
}
I wasn’t sure what you meant by: “around line 2803 in the blue section” – my css doesn’t have numbering like that (or I’m in the wrong part)
I don’t think it’s worked, which might mean I have done it wrong.
If I use Ingenea’s code it works if using a color (changed it to gray to try it out and used .epik-gray .site-header…) I am using the default color and if I only put .site-header… then it does not work. Is there another class I should be using? Thanks.
.
