Responsive header?

Can you link a page with unresponsive header?

No, I was checking the demo out on mobile to see how it looked, and I could see that the header wasn’t shrinking; the image gets cut off on both sides.

Are you using this theme and is your header responsive? I really like Book Lite and my site needs a refresh, but I would definitely want the header to shrink to look right and to keep on brand on mobile.

I checked the demo site and the waterfall image resized for me: https://awesomescreenshot.com/07a1owr708 – What browser & browser version are you seeing the issue in?

Chrome in Android. But that screenshot shows what I’m seeing, too. I was talking about the header image, btw — sorry I didn’t make it clear in my first post. At any rate, here you’re not seeing the entire image. You can test it out on the demo:

https://demo.wpshoppe.com/book-lite/

If you shrink your browser window you’ll see how everything conforms to the lower resolutions as you make the window narrower, except the header, which just gets cropped.

People have varying minimum requirements for responsive, though. Here’s an example of a true responsive header:

https://www.ads-software.com/themes/quark

I think part of the issue here is that Book Lite’s header image is ginormous, so might have caused problems if the developer had made it responsive. I was planning on reducing the size of that masthead for a more normal header image. But I would need the header image to shrink for smaller resolutions.

The image isn’t being responsive; it

Sorry, I’m not sure I see the header image that you’re referring to. What is it an image of and whereabouts on the demo is it?

That big waterfall image. Isn’t that the header image? It shows up on all the pages.

Yeah, sorry I thought you meant something else like the black bar at the top.

I’m not sure what you mean by responsive, the image does shrink down to a certain extent as is default with CSS background images.

If you wanted to see the entire image on mobile you could set the background-size to 100%, but since the image is far wider than its height you’d get this result: https://awesomescreenshot.com/0301owu380

No worries! Still, the setting the size could work for the header I’m thinking of. I’ll just have to dive in. Where in the CS did you set that size? In the header section?

If the theme doesn’t come with a “Custom CSS” bit of the dashboard install this plugin: https://www.ads-software.com/plugins/custom-css-manager-plugin/

Then use that plugin’s “Custom CSS Manager” part of the dashboard to hold your CSS modifications.

It might be worth trying out the ‘cover‘ and ‘contain‘ background sizes too.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Awesome — thank you!

My custom header in book lite is also non-responsive. The content, menus etc. all adjust for mobile devices, but the header does not.
premierobgynnapa.com

I have tried scouring these forums and found what looked like good @media code, but perhaps I’m not putting it in the right place? (Into header.php)

Please help this is extremely frustrating!