Strong theme – responsive header image

[John]

Having issues trying to get the image in the header to be responsive, shrinking on smaller screens and mobile. It does shrink a small amount, but then no further.

If possible, I’d like to have a smaller image and have it right aligned in the container, and have it be responsive.

Site is at http://damtodam.com/wordpress/

Thank you!

[John]

Anyone able to help with this issue?

[Sonal S Sinha]

Hi John,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:479px) {
.header {
background-position: -247px bottom;
background-repeat: no-repeat;
background-size: 175% auto !important;
position: relative !important;
}
}

@media screen and (min-width:480px) and (max-width:767px) {
.header {
background-position: -340px bottom;
background-repeat: no-repeat;
background-size: 171% auto !important;
position: relative !important;
}
}

Regards,
Dave

[John]

Thank you for the help, was able to get this to work for several different devices starting with the css above and adding a few more media queries.

Thanks!

John

[Author]

Posts