Lifestyle Pro Responsive Header Issues

[samw]

Hi

I have been through all the posts and various approaches to getting a full size Lifestyle Pro Responsive Header Image but am still hitting an issue

I have set the image size to 1140 x 200 in functions an adjusted CSS but cant resolve the media queries for 768 and 1023 screens!! It works fine on all other sizes

If anyone can help with the final CSS tweaks site is http://www.massageinbrighton.co.uk/

Many Thanks

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

http://www.massageinbrighton.co.uk/

[Victor Font]

You set the header image in custom css on the page for .site-title a. Add background-size: 100%; after the image and the image will be responsive.

---

Regards,

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

[samw]

Hi

Many Thanks for taking the time to reply - unfortunately that didnt work - are you suggesting to just add this to the custom media section in the original css file? My css file is below thanks

(edited to remove all the CSS)

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Victor Font]

You have a sitetitle a tag in the page itself as inline CSS. If you view the page source in your browser, it is on line 53. This is the code to which I am referring:

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://www.massageinbrighton.co.uk/wp-content/themes/lifestyle-pro/images/bg.png'); background-repeat: repeat; background-position: top left; background-attachment: scroll; }
</style>

You can see by the code block that this is not being enqueued through the correct WordPress process. It appears to have been added manually to your page. This is the wrong place for it because it is outside of the style sheet. I know the fix I mentioned earlier works because I tested it on a responsive test site: http://mattkersley.com/responsive/ or http://www.studiopress.com/responsive/. The fix I tested was to add the background-size dimension after the declaration of the background image url like this:

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://www.massageinbrighton.co.uk/wp-content/themes/lifestyle-pro/images/bg.png'); background-repeat: repeat; background-position: top left; background-attachment: scroll; 
background-size: 100%;}
</style>

To fix it the right way, this code should be removed from the page header and added to the style sheet where it belongs.

---

Regards,

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

[samw]

Hi

Thanks for taking a look - I changed the header to be more SEO friendly and it resizes fine using this approach

http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Steve@316 Design]

Hello Sam, thanks for the solution. On another note, how did you do your navigation? Meaning, at the smaller screen sizes/mobile, it turns into lines. (like I've seen on many other mobile responsive themes)

Thank You, Steve

---

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

[Author]

Posts