Lifestyle Pro swap out header at 767 breakpoint

[ClintN]

Lifestyle Pro

I'm attempting to swap out the theme's header at the media queries 767px breakpoint using:

@media only screen and (max-width: 767px) {
.header-image .site-header .wrap {
		background: url(images/767.jpg) no-repeat !important;
		background-size: contain !important;
	}
}

This might be the right path for me, however the original full-width header image (set in WP-Admin) is overlaid over the top. If I can make this disappear then remove the top & bottom margins I think I will have achieved success

I tried using :

@media only screen and (max-width: 767px) {
title-area .site-title a  {
		background: url(images/767.jpg) no-repeat !important;
		background-size: contain !important;
	}
}

But this did not swap out the files unfortunately.

Any pointers will be greatly appreciated.

http:// http://demo-2.neilsen.bitnamiapp.com/

[Brad Dalton]

Try display: none; with the class for the original image @767

---

Tutorials for StudioPress Themes & WooCommerce.

[ClintN]

Thank you braddalton

[ClintN]

I have had success in removing the original file with breaddalton's display: none; with the class for the original image @767

@media only screen and (max-width: 767px) {

        .site-title {
		font-size: 32px;
		display: none !important;
   	}
	
	
	.header-image .site-header .wrap {
		background: url(images/767.jpg) no-repeat left;
		background-size: cover !important;
	}

}

This code above only gives me a % of the header's height

I have not been able to get the new header displaying it's full height & width

[Victor Font]

I'd like to help you, but your site won't load in the responsive tester: http://www.studiopress.com/responsive/

---

Regards,

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

[emasai]

Change the 767 media queries to:

.header-image .site-header .wrap
background: url(images/767.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 70px;

 .site-header {
  background-color: transparent;}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[ClintN]

Many thanks Victor & Lynne

[Author]

Posts