Height Adjustment in Mobile – Agentpress

[marketme]

Hello, I am hoping someone can help me out on this. I have created a site that is perfect on the desktop screen but on Ipad and Iphone (and I am sure any other small screen device) it is showing a blue space underneath of the header - in between the header and nav menu. I know it has something to do with the min-height: 150px but I haven't figured out the right combination of coding to remove the added height in the smaller screen devices.

Any advice or ideas??

Thank you!!
Dana

http://www.travismarshallgroup.com/

[TSG]

You're right; it's the min-height. One way to remove the blue bar is to adjust the min-height through @media queries, so as the screen gets smaller so does the min-height.

[briansteeleca]

Hi Dana,

It would be easiest if your header image used an img tag with the width set to 100% and the height set to auto - then it would resize the same as your slider, but it would still probably look to small on a phone.

Working with the structure you already have, I'd recommend that you use 3 different background images: one for 768 and below, one for above 768 and below 1024, and your current image for 1024 and above.

In style.css, you have two media query breakpoints that you need to deal with:

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

In each, set your appropriate background image and set a new min-height (or height) to accommodate the image. An aside: you should design your images with room on each side so they'll still look good at the smallest width within each breakpoint.

After doing that, you'll want to remove the following from the max-width 768px breakpoint (because you don't want the background to resize):

background-size: contain !important;

Sorry it isn't easier, but I think that should accomplish what you want.

[marketme]

Thank you both for the reply!! I managed to get the blue removed but of course the space that blue area was occupying is still there and forcing the nav menu down. It just looks a little nicer!

So I attempted to adjust the heights in the @ media for the different sizes and it just kept my header from resizing. I also did upload two new smaller versions of the header one for 1023 and one for 768. I added in the below code but that didn't seem to fix the issue either. Am I missing something?

.site-title a {
background: url("http://www.travismarshallgroup.com/wp-content/uploads/2014/08/travis-marshall-group-small-copy.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
}

[marketme]

Just checking again to see if anyone has any suggestions for me to try. Or if you are a developer and can do this for me, please send me a quote at [email protected]. Thanks!

[briansteeleca]

There's a plugin called Genesis Responsive Header that may solve your problem.

And here's a video called Responsive Header in WordPress (Genesis Framework) that explains how to use it.

[briansteeleca]

I'm sorry Dana, but I just noticed Nick's last comment about his plugin:

Thanks for trying it out but I’m afraid that there isn’t a way to use it for the HTML5 themes right now.

So it probably won't work with your theme.

[marketme]

Thanks so much Brian, I came across this plugin in my searches as well and saw it is not HTML 5 compatible. I appreciate the reply though 🙂

Dana

[Author]

Posts