-
Posts
-
I saw there was a forum about formatting for an iPad but there was no resolution. I’m trying to get my header to format correctly but it’s just not working out. I’m assuming I need to create a different sized header for this with some custom CSS? Any help would be greatly appreciated.
Thanks!
The blog I need help with is modernruralliving.comI see that right now you haven’t uploaded a header through Appearance > Customize > Header, but instead you’ve hard-coded in a header graphic in your custom CSS:
.site-header {
background-image: url('http://modernruralliving.files.wordpress.com/2014/05/websiteheader-yes.jpg');
background-position: top center;
background-repeat: no-repeat;
padding-top: 225px;
}There are a few problems here. :-) The first is that at over 4000px wide, the current image is too large to display properly when hard-coded into your CSS like that.
What you might want to try first is to reduce the size of the image in a graphics program – I’d try making it 1000px wide.
Once you’ve uploaded the new version to your media library, update the image file path in your CSS. Also try removing the 225px of padding as that’s too much space.
Once you’ve done all that, take a peek at how it looks on a large monitor and on iPad and we can take it from there.
Keep in mind that the way this theme is designed, the header does not shrink proportionately all the way through from a large desktop screen to a small phone. If you look at the demo site and make your browser window smaller a bit at a time you can see how the header image changes at different screen sizes:
http://floraandfaunademo.wordpress.com/
At some of the “intermediate” sizes, the right side of the image does get cut off, so you may want to rethink your header image design and avoid putting important information like text on that side.
Let me know how it goes!
I didn’t upload header through the template because I didn’t want those bunnies. They sure are cute, but don’t match my brand. :) I think I fixed my header image to 1000px instead of 4000px. I designed it as 1000 in illustrator so I’m not sure what happened. :)
I also removed the padding and it looks good on a computer and iPad. It was still funky on the phone version so I ended up just editing the header so it wouldn’t cut off like you said. I didn’t think I’d like it on the computer/ipad version but it still looks all great! :)
Thanks for your help on this!
I didn’t upload header through the template because I didn’t want those bunnies. They sure are cute, but don’t match my brand. :)
Ha! Indeed, the bunnies aren’t for everyone. ;-)
If you upload your header through the Customizer to let the site’s default design handle its resizing on smaller devices, you can simply remove the bunnies with some custom CSS to hide them. This should do the trick:
.site-header {
background: none;
padding-top: 0;
}If things are currently looking as you like, that’s totally fine. :-) But I just wanted to let you know that in Firefox and Chrome on a Mac I don’t see the text part of your image on a desktop monitor, so you might want to experiment with the above. Here’s a screenshot:
Just let me know if I can be of further help!
You must be logged in to reply to this topic.
Theme Support 