Home › Community Forums › Epik Theme Support › Responsive header
- This topic has 6 replies, 4 voices, and was last updated 9 years, 3 months ago by
mindyi.
-
AuthorPosts
-
October 16, 2013 at 5:49 pm #8202
dreamingspires
CustomerHi 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.the site is: http://www.bodyinmind.org/
Thanks in advance
heidiOctober 16, 2013 at 10:26 pm #8213Wes
ModeratorYou’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.
If you haven’t already, check out this tutorial – http://www.carriedils.com/add-logo-genesis-theme/ it just covers some of the basics (you may already know this).
October 17, 2013 at 7:37 pm #8235dreamingspires
CustomerThanks 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.October 17, 2013 at 7:45 pm #8236dreamingspires
CustomerHi 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.
October 18, 2013 at 12:36 pm #8262Wes
ModeratorTry adding this to your css –
.epik-blue #header { background-size: contain !important; }
You would see line number if you were using a CSS editor, if you’re using the default WP editor, then the line numbers won’t show up.
October 21, 2013 at 8:17 am #8370Ingenea
CustomerWes,
.epik-blue .site-header {
background-size: contain !important;
}is the one that worked for me.
November 1, 2013 at 5:26 pm #8605mindyi
CustomerIf 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.
-
AuthorPosts
- You must be logged in to reply to this topic.