Focus theme responsive header with enormous gap

[ireneogier]

Hi there

For theme Focus we made this website: http://www.fleurdedag.nl/

To show the header responsive on the Iphone I add the plugin genesisi-responsive-header. So far so good....

But now the Focus theme responsive header shows an enormous gap due to
#header .wrap {
min-height: 250px;
overflow: hidden;
}
When I change this to min-height: 100%; it's oke for the responsive header but the normal header shrinks to much.
Can anyone tell me what to do?

Kind regards
Irene

http:// http://www.fleurdedag.nl/

[Tom]

Hi Irene,

Try placing this code at the bottom of your style.css file:

@media only screen and (max-width: 768px) {
    #header .wrap {
        min-height: 100%;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[ireneogier]

thanks Tom,
Unfortunately it leaves a big gap. The hight is 181px but it won't respond with 🙁

@media only screen and (max-width: 768px) {
#header .wrap {
min-height: 100%;
}

Do you have any other ideas?

[Tom]

You've inserted the snippet for 768px into the media query @media only screen and (max-width: 600px) (and also broke the 600px MQ).

Placed correctly on its own, the code will work.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[ireneogier]

Hi Tom,
Thanks. That worked for the 768px, Yes! The 320 leaves a little gap though.... Tried to declare min-height: 108px; but it won't do the tric.... do you have a last suggestion?

@media only screen and (max-width: 768px) {
#header .wrap {
min-height: 100%;

}
}

@media only screen and (max-width: 320px) {
#header .wrap {
min-height: 100%;
}
}

[Tom]

@media only screen and (max-width: 320px)
#title-area {
  height: 69px !important;
}

@media only screen and (max-width: 240px)
#title-area {
  background: url(http://www.fleurdedag.nl/wp-content/uploads/2014/04/header240.jpg) no-repeat center !important;
  background-size: contain !important;
  width: 100% !important;
  height: 72px !important;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[ireneogier]

Thanks a lot Tom!

[Author]

Posts