Metro Pro Need Help on Responsive Header

[kmmackey]

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/

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[Sridhar Katakam]

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

---

Genesis Tutorials | Follow me on Twitter

[Sridhar Katakam]

See if this helps: http://sridharkatakam.com/add-responsive-header-image-metro-pro/

---

Genesis Tutorials | Follow me on Twitter

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[Sridhar Katakam]

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

---

Genesis Tutorials | Follow me on Twitter

[kmmackey]

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!

[Author]

Posts