Focus Theme Responsive Header

[martag]

Hi,

I used the instructions here to help with the making the header mobile responsive (awesome by the way! helped on another site) http://www.studiopress.community/topic/header-not-resizing-in-mobile-mocha-theme/. It works great on this site for width but height I can't get it to work properly.

I have tried Nick's Genesis Responsive Header plugin on this site but had the same issue in height. Even used the fields to set height in the plugin.

Any suggestions would be appreciated!
~Marta

http://enduringfitness4u.com/

[nutsandbolts]

Have you tried removing the header image from Appearance > Header and adding it to the stylesheet like we did on your other site? Right now your background-size: contain !important; rule is being overridden by the Appearance > Header settings.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[martag]

Thanks for the reply.

I did but changed it back it didn't work. Tried it again since I was really tired when I tried it the first time LOL. 🙂

For this theme I had to put it under: #header .wrap

And still can't get the height to work especially on smaller phone screens. Tablet screens it isn't as noticeable.

Any other suggestions? Thanks again for your time.

~Marta

[nutsandbolts]

You've got a min-height of 200px set - that is staying in place at smaller screen sizes because there's no media query to override it. So under each section under Responsive Design or Media Queries, you'll need to add another min-height rule for #header .wrap.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[martag]

Aha! Thank you! This is starting to make sense now. Appreciate all your help.

~Marta

[Author]

Posts