This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

10
  1. Julie Gomoll 10 years, 3 months ago

    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”

  2. Julie Gomoll 10 years, 3 months ago

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

  3. Andrew Misplon Staff 10 years, 3 months ago

    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;
}
}
  4. Andrew Misplon Staff 10 years, 3 months ago

    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.

  5. Julie Gomoll 10 years, 3 months ago

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

  6. Andrew Misplon Staff 10 years, 3 months ago

    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;
}
}
  7. Julie Gomoll 10 years, 3 months ago

    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!

  8. Andrew Misplon Staff 10 years, 3 months ago

    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.

  9. Julie Gomoll 10 years, 3 months ago

    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/

  10. Andrew Misplon Staff 10 years, 3 months ago

    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.

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.

Have a different question or issue?

Start New Thread