Focus Theme Responsive Header

Community Forums Forums Design Tips and Tricks Focus Theme Responsive Header

This topic is: not resolved

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #70988

    martag
    Participant
    Post count: 19

    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.com/forums/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/
    #71078

    nutsandbolts
    Moderator
    Post count: 3131

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71325

    martag
    Participant
    Post count: 19

    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

    #71392

    nutsandbolts
    Moderator
    Post count: 3131

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71510

    martag
    Participant
    Post count: 19

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

    ~Marta

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

You must be logged in to reply to this topic.