Hi there, could you provide a link to your site? Thanks.
Hi Kathryn,
here you go: http://chezsasha.com/
Thanks!
Thanks! I see what you mean – I’m going to ask a developer to take a look at this and I’ll keep you posted here.
Hi there, version 1.2.2 of Quintus should fix this issue with the header on mobile devices. It’s been re-submitted to the ww.wp.xz.cn repository and should be available soon. You can also download it immediately in the right column where it says “Download Quintus for your self-hosted WordPress site” here:
http://theme.wordpress.com/themes/quintus/
Please let me know if the new version of Quintus solves the mobile header issue. Thanks!
Hi Kathryn,
Thanks for your help again. If I choose to update the theme directly from my Dashboard, will my current settings/widgets/header be effected?
Thank you.
As long as you have not edited any of your theme files directly – including style.css – none of your current settings/widgets/header should be affected by updating the theme.
Do you know if you’ve edited the theme files?
Hi Kathryn,
I don’t believe I have edited the theme files but am not quite sure. I did change the hyperlink color last week though – not sure if that means the theme. Is there a way to check?
Thank you.
Hello again, Kathryn.
So I’ve updated the theme and the header loads on mobile! Hurray!
However, a new problem has arisen – the header does not scale down from its regular size to mobile size. Is there a way to fix this?
Many thanks!
So I’ve updated the theme and the header loads on mobile! Hurray!
Yay, glad to hear it!
However, a new problem has arisen – the header does not scale down from its regular size to mobile size. Is there a way to fix this?
Because Quintus uses a background image for its header, it doesn’t scale on smaller screens, and for that reason, abstract, decorative, or more flexible photographic images may work better in this theme.
A couple of other alternatives are:
1) You could try adding some custom CSS to modify the header display a bit at various screen sizes. My colleague designsimply put this together for you to try:
header.blog-header {
background-size: contain;
background-color: #fff !important;
display: block;
width: 100%;
}
@media only screen and (max-width: 400px) {
header.blog-header {
max-height: 90px;
border-right: 5px solid #222;
}
}
@media only screen and (min-width: 400px) and (max-width: 640px) {
header.blog-header {
max-height: 140px;
}
}
@media only screen and (min-width: 640px) and (max-width: 768px) {
header.blog-header {
max-height: 170px;
}
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
header.blog-header {
max-height: 200px;
}
}
2) Another alternative would be to create a child theme and hard-code the header image into the file, which would bypass the background-image technique that’s currently used. That would allow better responsive display.
Making a child theme means your changes won’t be overwritten when you update the theme. If you’re new to child themes, you can explore these guides:
http://codex.ww.wp.xz.cn/Child_Themes
http://op111.net/53/
http://vimeo.com/49770088
Here’s a tutorial on making a responsive header:
http://dynamiksupport.cobaltapps.com/customer/portal/articles/1308357-how-to-make-your-logo-image-responsive
Good luck and do let me know how it goes!
