WordPress.org

Ready to get started?Download WordPress

Forums

Mantra
My Custom Header Image Isn't Responsive? (18 posts)

  1. helenjbeal
    Member
    Posted 1 year ago #

    I have a custom image header in my site at carapacebooks.co.uk that I designed to the size suggested (1100*200px) that looks fine in my browser but isn't responding on mobile devices or browsers with a different resolution. I can't see where I could have turned off responsiveness - please can you help me fix it? Thank you!

  2. rokofages75
    Member
    Posted 1 year ago #

    I'm having the same problem ever since upgrading to the latest version of Mantra. Before that, my header was responsive and would adjust to different resolutions. I haven't figured out a way to fix it yet, but saw someone else with the same issue post a comment on the Mantra site and asked about it there. Hopefully it's an issue they'll fix in the next version!

  3. helenjbeal
    Member
    Posted 1 year ago #

    Thanks rokofages75 - I might have some code to fix this that a friend has devised - now I know it's not just me doing something silly I'll test it and post it here if it works...

  4. the.Zedt
    Member
    Posted 1 year ago #

    Are you by any chance using the new (not-responsive) "logo upload" feature instead of the old (now responsive) header background image?

  5. Cthulhu1976
    Member
    Posted 1 year ago #

    Hi guys,

    just had a quick look at carapacebooks.co.uk.

    If it's urgent, you might want to edit your style.css:
    Look for the following sections: #branding and #bg_image:

    Switch from:

    #branding {
    height: 200px;
    }

    to:

    #branding {
    height: 100%;
    }

    And also edit the following from:

    #bg_image {
    display: block;
    margin: 0 auto;
    }

    to:

    #bg_image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    }

    The bg_image's max-width in combination with the 100% height of #branding is what does the (responsive) magic :).

    Anyway: Please keep in mind that if you use the theme as is and not as a child theme, the next update of this theme might (or certainly will) overwrite these values again.
    If you need a quick fix for the current status, you might give it a shot with the two code additions I mentioned.

    Hope this is of help?

  6. helenjbeal
    Member
    Posted 1 year ago #

    Hi The Zedt - I've tried setting the header through both the standard WP header section and the Mantra settings header function (upload logo) - neither have made the header responsive even though I have designed it several times to the exact size required...

    Thanks also to Cthulhu1976 - I also had this suggestion from a friend but apparently need to make a file writeable before I can make those changes which I imagine is very straightforward to anyone who knows what they are doing, but not, unfortunately, me.

    What's the chance of Cryout Creations fixing this do you think?

    Thanks, Helen

    1. Login to WP...
    2. Click [Appearance] from left-menu
    3. Click [Editor] from sub-menu of left-hand "Appearance" menu
    4. Should be presented with "Stylesheet".... (add custom class beneath all the initial comments... image attached)
    5. Click [Update File]
    6. On the right-hand side - look for "Header" and click on it
    7. Now look for the bit of code that says '<div id="branding" role="banner">'..... (scroll just a little, and it should come into view)
    8. Add 'class="header-fix"' to it... (image attached).
    9. Click [Update File]

  7. the.Zedt
    Member
    Posted 1 year ago #

    Is the "Mobile View" option enabled?

  8. helenjbeal
    Member
    Posted 1 year ago #

    I have now enabled that - and when I additionally set the Content/Sidebar width to absolute it fixed it in my browser. However, when I look at it on my phone, only the far right and left sides of the header show - almost like there is a big white image over it??

  9. helenjbeal
    Member
    Posted 1 year ago #

    Also, there appears to be a bug in that it looks like it overwrites my favicon file with the header file - but on the actual published site this still looks okay...

  10. helenjbeal
    Member
    Posted 1 year ago #

    I removed the header image from the old WP way of setting a header, and now there is no header at all showing on my phone - not even the slivers to the right and left...

  11. helenjbeal
    Member
    Posted 1 year ago #

    Sorry for another comment, but the header does flash up as the page loads on my mobile, but disappears... so it does know that it's there...

  12. CryoutCreations
    Member
    Theme Author

    Posted 1 year ago #

    If you're using an iSomething device, Safari improperly handles the header image responsiveness. We've included a workaround to this in the latest 2.0.3 update.
    Unfortunately, 2.0.3 also includes a tiny itsy bitsy bug concerning the fonts no longer working, so if you're using custom fonts, it's best to wait for 2.0.3.1 :)

  13. bp1979
    Member
    Posted 10 months ago #

    Hi guys,

    i'm using Mantra with a total-width of 1150px. I'm working with Google Chrome. Now i'm testing the responsiveness of the theme, simply by dragging the left and right side of my browser window closer to each other.
    Here's the problem: nearly until 2/3 of the window-size nothing is happening. The website gets cut away at the right side. From 2/3s (about 800px width) on, the website gets responsive and is scaled and fitted to the actual size of the window - thats fine for me.
    But is there any solution, that the website responds to changes in width automatically the whole time?

  14. CryoutCreations
    Member
    Theme Author

    Posted 10 months ago #

    800px is the exact width at which Mantra activates responsive sizes.

    Responsiveness is meant for (small) mobile devices, not for (large) computer screen resolutions.

  15. bp1979
    Member
    Posted 10 months ago #

    Thanks for your answer.
    The idea behind my question was displaying mantra on mobile devices like tablets with a resolution of 1024px in panorama mode (for people who prefer using their mobile device in panorama mode).

  16. poppyph
    Member
    Posted 8 months ago #

    For exactly the same reason bp1979 asked the question - Are there plans to make the setting of 800px adjustable? Is there a location in the theme where I could change that (in a child theme)?

    I have a client for whom I've built a site using Mantra as the base theme, but he's very upset about the display on his tablet in panorama mode - to the point where if I can't resolve this using Mantra, I will have to start over using a different theme to make him happy.

  17. theZedt
    Member
    Posted 8 months ago #

    This value cannot be configurable and there's no easy way to override the mobile styling at the moment.

    Copy everything from Mantra's style-mobile.css up to (but not including) the line
    @media (max-width: 650px) {
    to your child theme's style.css then change 800px in the pasted content in line
    @media (max-width: 800px) {
    to the value you wish to use at triggering responsiveness.

  18. poppyph
    Member
    Posted 8 months ago #

    Thank you, appreciate the guidance.

    Still not working. My child theme style.css, with the changes suggested above, appears to be conflicting CSS generated by custom-styles.php, which is statically setting the width value for #wrapper to 1100 (based on computation of values set within the control panel).

    Suggestions? I'm happy to provide a URL if that's helpful.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic