[Resolved] Responsive H1 in Header Element

Home Forums Support Responsive H1 in Header Element

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #955201
    Mark

    Hello, I just want the text in my new header element (the text in the hero image), link attached, to be responsive. Everything else is already responsive in the navigation header and works well.

    #955217
    David
    Staff
    Customer Support

    Hi there,

    instead of using inline styles and the bold tag in your H1 element … do this:

    <h1 class="hero-heading">My title</h1>

    And add this CSS:

    h1.hero-heading {
        font-size: 70px;
        font-weight: bold;
    }
    @media (max-width: 768px) {
        h1.hero-heading {
            font-size: 40px;
        }
    }
    #955221
    Mark

    Ok, I also added font face “work sans” into the element.

    Should I add “font-face: work sans;” to the css too?

    #955242
    David
    Staff
    Customer Support

    That code is not valid HTML – there is no <font face> tag. Its currently being ignored amd using the Muli font you have set in the Customizer for the H1.

    you would need to use the:

    font-family: 'work sans';

    property in your CSS.

    But if you haven’t selected Work Sans as a font in the customizer for any particular element then the font will need to be imported/enqueued first. This article explains the various methods:

    https://www.cloudways.com/blog/how-to-use-google-fonts-with-wordpress/

    #955313
    Mark

    All set. Thanks

    #955335
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.