My H1s and H2s aren’t responsive – they’re completely overlapped on mobile.
Headlines aren’t responsive
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Replies on this thread are closed. Please create a new thread if you have a question,
or purchase a SiteOrigin Premium license if you need one-on-one email support.
FYI, I checked out Tyler’s tutorial, which showed how to fix a non-responsive headline in the “span class” area. My issue is with H1s and H2s, and there is no “span class”
(Maybe this belongs in a different thread?) My header is also problematic on mobile. I end up with way too much space between the logo and the responsive menu below it.
Hi Julie
In Custom CSS you’re setting line-height to zero, that’s causing the problem. You can try this instead:
1. Remove the line-height: 0; declaration from your entry content h1 rule.
2. Add the following:
@media (min-width: 780px) { .entry-content h1, .comment-content h1 { line-height: 0; } }No problem, we can assist with the mobile spacing issue. It’s also a challenge relating to Custom CSS.
1. Go to Appearance > Custom CSS and locate:
.main-navigation ul li a { margin-top: 62px; }Remove the above rule and replace it with:
.main-navigation ul li a:not(.mobilenav-main-link) { margin-top: 62px; }Hopefully, that does the trick :) Let us know how you come along.
Great – the header spacing is much better. The H1s are still overlapping, although not as much. And the linespacing on the H2s is still way too tight. I tried adjusting the line-height – that increased the linespacing on the desktop version, but didn’t affect it when viewing as mobile.
Getting there! Thanks :)
Glad to hear you’re making progress. Try changing your Custom CSS rule as follows:
.entry-content h1, .comment-content h1 { font-family: "Open Sans ExtraBold", sans-serif; font-weight: bold; font-size: 36px; line-height: 1; }I’ve added a line-height declaration.
OR to just target it on mobile try adding:
@media (max-width: 680px) { .entry-content h1, .comment-content h1 { line-height: 1; } }Front page is looking great. FYI, when I tried adjusting the line-height on just the mobile version, it added way to much on the desktop version. Hadn’t occurred to me to find another place to adjust it. Now I know!
The line height is still wonky on the desktop version of other H1s – see http://juliegomoll.wpengine.com/speaking/ This page looks fine on mobile though :/
I really appreciate your help!
Glad to hear you’re making progress. You can sort out the desktop line height by adjusting the following Custom CSS:
@media (min-width: 780px) .entry-content h1, .comment-content h1 { line-height: 0; }The above is already present in your Custom CSS so you just need to tweak it.
I believe that’s exactly what I have –
@media (min-width: 780px) { .entry-content h1, .comment-content h1 { line-height: 0; }But on this page it still won’t work. http://juliegomoll.staging.wpengine.com/speaking/
That’s it. Right now you have line-height: 0 for resolutions after 780. That means if your headline is more than one line the text will overlay. You’d need to adjust that to a normal value.