Lifestyle Pro – Responsive Header

[Steve@316 Design]

I have many sites using the Lifestyle Pro Theme and when viewed on a mobile device, you get a big grey box around the header. Is there a way to eliminate this grey area?
See attached. three screenshots; the two on the left are two different phones, the one on the right I Photoshopped how I would like the header to display.
Thx, Steve

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

http://bendinglimits.com/

[anotherusername]

You are going to need to write media query rules for your .site-titel a and for your .site-header

Basically you will need to determine how big you want everything and start working on your min-height for site-title a and also on your margins and paddings for the header.

That doesn't look like it is a studiopress them. You might get better support if you ask on the forum where they sold you the theme (of course, you are always welcome to ask here, too. Just trying to figure out where you might get the best / fastest advice).

Hope this helps.

[Steve@316 Design]

Hello anotherusername, Yes, it's a StudioPress theme, Lifestyle Pro.
No I don't know how to " write media query rules"
I'd be ok, even if it scaled like this http://316design.com/

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

[Steve@316 Design]

Circling back to this. Anything new to add?

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

[Victor Font]

Open your theme's style.css file and search for the line that reads: @media only screen and (max-width: 1023px). Then add the following in that section.

.site-header {
padding: 0;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts