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 1 year, 2 months ago.

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

    kmmackey
    Participant
    Post count: 9

    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

    AC
    Blocked
    Post count: 7712

    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.

    #64128

    Sridhar Katakam
    Participant
    Post count: 1068

    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: 1068
    #64269

    AC
    Blocked
    Post count: 7712

    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.

    #64283

    Sridhar Katakam
    Participant
    Post count: 1068

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


    #64333

    kmmackey
    Participant
    Post count: 9

    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.