WordPress.org

Ready to get started?Download WordPress

Forums

Book Lite
[resolved] Responsive header? (12 posts)

  1. mrmonster
    Member
    Posted 11 months ago #

    The header on this theme doesn't appear to be responsive. Anybody know how to do it?

    Thanks :)

  2. Andrew
    Forum Moderator
    Posted 11 months ago #

    Can you link a page with unresponsive header?

  3. mrmonster
    Member
    Posted 11 months ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 11 months ago #

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

  5. mrmonster
    Member
    Posted 11 months ago #

    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:

    http://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:

    http://wordpress.org/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

  6. Andrew
    Forum Moderator
    Posted 11 months ago #

    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?

  7. mrmonster
    Member
    Posted 11 months ago #

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

  8. Andrew
    Forum Moderator
    Posted 11 months ago #

    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: http://awesomescreenshot.com/0301owu380

  9. mrmonster
    Member
    Posted 11 months ago #

    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?

  10. Andrew
    Forum Moderator
    Posted 11 months ago #

    If the theme doesn't come with a "Custom CSS" bit of the dashboard install this plugin: http://wordpress.org/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

  11. mrmonster
    Member
    Posted 11 months ago #

    Awesome -- thank you!

  12. Shellybelly57
    Member
    Posted 2 months ago #

    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!

Reply

You must log in to post.

About this Theme

About this Topic