Beautiful Banner Background

[jtdatawork]

Hi!

I wanted to resize the banner background so it shrinks to stay contained for mobile. I was able to do this using code modified from this forum post on the same subject. http://www.studiopress.community/topic/beautiful-pro-header-image/ - by removing the custom background from functions and replacing it with css.

It worked, but the image becomes too small on smaller devices. So I tried to modify it in the media queries, as suggested in the same post, but it didn't work. That post was resolved a year ago, and I think the code may have changed since then. Or else I am missing something. Can anyone help me pinpoint how to make the media queries work as well as the full size?

Thank you!
Judy

---

JT Dataworks Web design and SEO

http://coldnosecollege.s406.sureserver.com/

[Lauren @ OnceCoupled]

The height of the containing element is set to 200px, so it will not decrease with the size of the image. You can do it manually, by adding media queries, as suggested in the previous post. The code provided there should work on your page, but you may need to adjust the height at more regular intervals, and to a different number. For example:

@media only screen and (max-width: 768px) {
    .custom-background .site-header-banner {
        height: 128px;
    }
}

@media only screen and (max-width: 480px) {
    .custom-background .site-header-banner {
        height: 80px;
    }
}

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jtdatawork]

Hi Lauren,

Thanks! I had tried the media queries, but they didn't work. I must have had some bad code in there. I reset the stylesheet and tried again and it worked.

Thanks for encouraging me to try again. 🙂

Judy

---

JT Dataworks Web design and SEO

[Lauren @ OnceCoupled]

Glad you got it worked out! Yeah, that happens when you're missing something like a closing bracket.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts