Focus theme responsive header with enormous gap

Community Forums Forums Design Tips and Tricks Focus theme responsive header with enormous gap

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  ireneogier 4 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #101130

    ireneogier
    Participant
    Post count: 6

    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/
    #101266

    Tom
    Participant
    Post count: 887

    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 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #101815

    ireneogier
    Participant
    Post count: 6

    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?

    #101984

    Tom
    Participant
    Post count: 887

    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 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #102009

    ireneogier
    Participant
    Post count: 6

    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%;
    }
    }

    #102082

    Tom
    Participant
    Post count: 887
    @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 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #102129

    ireneogier
    Participant
    Post count: 6

    Thanks a lot Tom!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.