Mobile Responsive Header

[usmcwife01]

Some one helped me get my uploaded header so it will shrink to fit on mobile, but now I have a big space of blue above and below it. Is there a way to get rid of it? I was looking at the showcase blogs for lifestyle pro. They all have custom headers that still look exactly the same on a mobile device. Is that possible to do? Thanks in advance for your help. I am a newbie and still trying to learn. 🙂

http://www.familyfitforduty.com

[nutsandbolts]

Change your header background CSS rule to this:

background: #fff url(http://www.familyfitforduty.com/wp-content/uploads/2013/11/Blogger-11-6.jpg) center no-repeat !important;

That should remove the blue.

---

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

[kmmackey]

I am using the lifestyle pro theme and am having the same problem. I tried the above and it did not help. Before that I had followed the pixelista tutorial - http://thepixelista.com/responsive-genesis-child-theme-logo/ but the smallest size has too much space above and below the banner. Here is my testing site - http://thepixelista.com/responsive-genesis-child-theme-logo/.

[nutsandbolts]

Can you paste your link again? Looks like you pasted the tutorial link twice.

---

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

[kmmackey]

Here is the link to my test site - http://www.kmtesting.com/

As mentioned, I am using the lifestyle pro theme. I tried the above and it did not help. Before that I had followed the pixelista tutorial – http://thepixelista.com/responsive-genesis-child-theme-logo/ but the smallest size has too much space above and below the banner.

Thanks,
Kathy

[nutsandbolts]

Have you made any changes to your stylesheet other than CSS rules related to the header? If you haven't made other significant changes, I would suggest reverting back to the original Lifestyle Pro stylesheet - you can open style.css on your computer with a text editor and just copy and paste everything to overwrite what's on the site now. Then if you follow this tutorial, which was created specifically for Lifestyle Pro, you should be able to fix the header issue pretty easily: http://wpsites.net/web-design/customize-mobile-responsiveness-of-lifestyle-pro-theme-header/

---

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

[kmmackey]

Hi,

I followed that tutorial and the banner is still not responsive.

http://www.kmtesting.com/

Help is appreciated.

[nutsandbolts]

If you would be comfortable letting me log into your site, I would be glad to try to get this fixed for you. You can email me directly if that's something you'd like to try, or no worries if that isn't something you want to do. Sometimes it's just easier to do than to explain. 🙂

---

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

[kmmackey]

Hello,

Just want to say a very BIG THANKS to Andrea of Nuts and Bolts for helping with this. The link shown is a test site so if anyone checks this in a few days, it may show something unrelated to this post.

Kathy

[judith8686]

I think i've completely messed up my css trying to fix this.... (massive newbie)

I wanted to upload my own header, which I have done after altering sizing in functions php. It looks great on my laptop, but on iphone its still showing all the padding and on ipad it actually crops the header ;-/

I've tried the above but think Im doing more harm than good.

my site is http://www.judithlewis.co.uk

[nutsandbolts]

Hi Judith,

Find this in your stylesheet:

.header-full-width.header-image .site-title a {
background-position: center !important;
margin: 0;
}

and change it to this:

.header-full-width.header-image .site-title a {
background-position: center !important;
margin: 0;
background-size: contain !important;
}

That will force the header to resize for tablets (though you'll still have a lot of padding/aqua background around it).

---

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

[judith8686]

Thanks for that Andrea, still crops when tablet is in portrait, but I can live with that lol

[Author]

Posts