Executive Pro Full Width Header Mobile Responsive Issue

[dahlkr]

Hi, I changed the css & php to make the header image full width using 1140px.

I want the header image and the site inner background to adjust properly on mobile devices. Is there code I need to remove or add to each section to do that?

Any help would be appreciated thanks.

http://randmlandscaping.com

[nutsandbolts]

Remove the header image from Appearance > Header and add it manually by putting the following in your stylesheet:

.site-title a {
background: url(http://randmlandscaping.com/wp-content/uploads/2013/11/header.png) no-repeat !important;
background-size: contain !important;
}

Also, find this:

.header-image .title-area, .header-image .site-title, .header-image .site-title a {
float: left;
margin: 0;
max-width: 1140px;
min-height: 210px;
padding: 0;
width: 100%;
}

and change it to this:

.header-image .title-area, .header-image .site-title, .header-image .site-title a {
float: left;
margin: 0;
min-height: 210px;
padding: 0;
width: 100%;
}

That should get it to resize, though it will likely cause some padding issues that you'll have to address. CSS is like playing Jenga - change one thing and 40 more come tumbling down! 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[dahlkr]

Hi Nuts and Bolts

I was out all day yesterday - just getting to this. Was so excited but it did not work. Once removing the header image in the "Appearance" section, the site went back to a text header. It is not picking up the image from the stylesheet.

Any other ideas?

Thanks thus far.

[nutsandbolts]

Oh! Just realized what the problem is.

You need to comment out or remove the custom header function in functions.php. Once you do that, there will be a new option in your Genesis theme settings to choose an image logo or dynamic text, and you'll need to change it to image.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[jillchongva]

Hi guys!

This works great but when it's on a very small screen, it's too small. What's the proper way to scale the image up a bit?

URL is http://www.truefunctionalmedicine.com

jill

---

jill chongva
online marketing: lusciouspress.com
organizing: lusciousorganizing.com
em: [email protected]

[dahlkr]

Hi thank you but I am not sure how exactly to comment it out properly. Can you provide which php lines to add the
remove (comment out) with the exact wording as I have never done this before.

Thank you.

[dahlkr]

Ok, I figured how to comment it out.. Thank you Thank you.

On the different size devices there is now a big space between the header and the site inner. I will play around with it. I so appreciate your help.

[Author]

Posts