Metro Pro Need Help on Responsive Header

Community Forums Forums Design Tips and Tricks Metro Pro Need Help on Responsive Header

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  kmmackey 10 months, 1 week ago.

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

    kmmackey
    Participant
    Post count: 7

    Hi,

    I am using the metro pro theme. I am struggling to make my header image responsive. It does respond responsively for the width but the issue is with the height at the smaller device sizes. There is a big white gap between the bottom of the header and where the page content starts.

    The site – http://thepigandpearl.com/

    I tried modifying the css as shown below:

    .header-image .site-title a {
    background-size: contain !important;
    overflow: hidden;
    height: auto;
    }

    This did not work. Should I do something different here? Or modify the functions file or something else in css? Help on this is greatly appreciated.

    Thanks,
    KM

    http://thepigandpearl.com/
    #64111

    anitac
    Participant
    Post count: 7032

    Are you making that adjustment in the top CSS or in the area of the Responsive Design/Media Queries. Make sure you are modifying the code in the media queries. If you don’t see it there, add it.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #64128

    Sridhar Katakam
    Participant
    Post count: 925

    If Anita’s suggestion does not work, please delete/comment out your above custom CSS and let us know when done.


    #64243

    Sridhar Katakam
    Participant
    Post count: 925
    #64269

    anitac
    Participant
    Post count: 7032

    Sridhar, I’ve been told that the Genesis Response Header is not working with the new 2.0/HTML5 upgrade. I’ve tried it myself and it does not work at this time.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #64283

    Sridhar Katakam
    Participant
    Post count: 925

    It works fine with a bit of CSS. Have you seen by post above?


    #64333

    kmmackey
    Participant
    Post count: 7

    Hi,

    I have tried the options and nothing has worked.

    I did read this post – See if this helps: http://sridharkatakam.com/add-responsive-header-image-metro-pro/. Tried both options. I currently still have the modifications in my file
    .title-area {
    width: 100%;
    }

    .header-image .site-title a {
    max-width: none;
    min-height: 226px;
    }

    @media only screen and (max-width: 320px) {
    .header-image .site-title a,
    .header-image .site-title, .header-image .title-area {
    min-height: 0;
    }
    }

    **Height is my header height.

    Is there something else I should try? Help is very much appreciated!

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

You must be logged in to reply to this topic.