Innov8ive Theme – Mobile Responsive header – duplicate images showing

[CaseyKt2013]

Hello,

Can someone please help me identify why the original full size header is still showing on smaller screens? The correct size image is showing, but you can see portions of the original largest image behind it, as well.

Thank you in advance for your help

http://mightyautopro.com

[vajrasar]

In you style.css search for - @media only screen and (max-width: 800px)

then either replace or add following css -

.site-container .site-header, .innovative-yellow .site-container .site-header, .innovative-turquoise .site-container .site-header {
  background-size: contain !important;
  max-height: 120px;
}

.title-area {
 background: none;
}

Then search for - .header-image .title-area, .header-image .site-title, .header-image .site-title a

and change height: 170px; to max-height: 170px;

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[CaseyKt2013]

Thank you = trying this right now.

[CaseyKt2013]

Okay, the duplicate image is now gone - but there is still a lot of padding above and below the smaller images (it is keeping the same height as the full size header image) - how to do I get rid of that?

Thank you!

[vajrasar]

Try and change min-height here to 0px

@media only screen and (max-width: 485px) {
.site-container .site-header, .innovative-yellow .site-container .site-header, .innovative-turquoise .site-container .site-header {
  background-size: contain !important;
  min-height: 0px;
}
}

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[Author]

Posts