header image for Balance

[jlph]

I am using a taller image than the default header image space for the theme. Default width is fine at 960, but the image height is 728 instead of default 135px. I changed the css code for min-height here, but of course it looks ok only on my laptop. Do I need to change every instance of header image height in the css for it to look right on mobile? Thanks!

#header {
margin: 0 auto;
min-height: 728px;
overflow: hidden;
width: 960px;

[SavvyJackie]

Hi,
What theme are you using? Do you have a link you can share?

You can use StudioPress http://www.studiopress.com/responsive/ design checker to see how it looks on different viewports.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[jlph]

Thanks for the response! I can't share the URL right now though. That site is interesting, and I did already check it on an iphone and ipad so I know it's not working. I just need to figure out what areas in the css I need to change the header image height to so it appears correctly everywhere, thanks!

[SavvyJackie]

The @media queries sections at the bottom of the stylesheet is where to look.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[emasai]

A height of 728px is not great for SEO as all your content will fall beneath the fold. For mobile phones I would remove it completely, people checking web sites on their phone are looking for information not pretty pictures.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[jlph]

I totally agree with you on the fold problem, but that's just the way it's going to be for this particular site. Also, it works for the subject matter of the site, so it will be ok I think. : ) Thanks!

[jlph]

Thanks SavvyJackie! That's what I'm looking at but I can't find an element for the header image file itself to edit....or maybe I don't know what I'm looking for ha! Still trying...

[SavvyJackie]

If you don't see then try adding a copy of it from in the main section, and adjusting the values. Remember each @media query section is in it's own set of brackets. The max-widths may be different on yours. Just be sure to keep your additions inside the section brackets.

@media only screen and (max-width: 1139px) {

}

@media only screen and (max-width: 1023px) {

}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts