Home Forums Community Forum Responsive Headlines out of Display

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • Felinho
    Participant
    Post count: 7

    Hey guys,

    I’ve got a weird problem on my site: The h1 (only the h1) headlines are not responsive on mobile devices, so they’re way to big! Weird: The h1 on my starting page works without any problems. All other h1 (they have the exact same setting) just have way too big px.

    You can see the problem here:
    https://share-your-photo.com/047b62bc61

    In addition: sometimes my logo is shown mobile, sometimes not (on the same page!). I just reloaded the site I made the screenshot above and see:
    https://share-your-photo.com/3364ea1705

    What do you think this could be? At the moment I make the h1 not visible on small screens (!!) which is I think not really kind for google.

    Thanks and best regards,

    Felix

    marklchaves
    Participant
    Post count: 141

    Thanks for posting. Not so weird. This kinda thing happens a lot. So, the good news is that there are several options for you.

    If you are comfortable with CSS, I would recommend using the rem CSS unit. That means you need to override that H1 or replace it with a custom class. For some reason, Avada theme settings for Typography doesn’t accept rem units. I’m pretty sure I’ve tried this before. You can only specify pixels, which aren’t responsive.

    Either way, once you decide, add something like this to your CSS.

    Overriding H1

    
    h1 {
      font-size: 2rem;
    }
    

    Custom Class

    
    .responsive-h1 {
      font-size: 2rem;
    }
    

    Here’s a live demo using a custom CSS class

    https://codepen.io/marklchaves/full/mZwVbE

    Notes
    Adjust the number 2 in the 2rem above to what suits you best.

    As I mentioned, you need to be comfortable with CSS, because you might need to adjust line heights (use rem too), add media queries, or adjust word-break properties. Ah, the joy of web dev!

    There are many articles on CSS units. I like this one https://gist.github.com/basham/2175a16ab7c60ce8e001

    This is the best I can do without looking at your code.

    Good luck!

    Felinho
    Participant
    Post count: 7

    Thanks for the two codes man!

    I think I get it clearer now.

    At least I have (hopefully only) one more question:

    Ich put the

    h1 {
    font-size: 2rem;
    }

    into the style.css? Or do I have to put it somewhere else?

    I also hope my logo-problem disappears with that.

    Kind regards and thx!

    Felinho
    Participant
    Post count: 7

    Okay, you’ve done it!! Thank you!

    I put the
    h1 {
    font-size: 2rem;
    }

    in the CSS of every site the problem existed.

    Thank you

    Felinho
    Participant
    Post count: 7

    Ah…after 3 min it didn’t work again.

    Do you think you can solve the problem by visiting my backend?

    You know my website so you can contact me.

    Best regards,

    Felix

Viewing 5 posts - 1 through 5 (of 5 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.