My Custom Header Image Isn't Responsive?

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!

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…

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

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?

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]

Is the “Mobile View” option enabled?

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??

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…

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…

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…

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 ??

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?

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

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

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).

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.