[Resolved] Responsive H1 in Header Element

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

[David]

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;
    }
}

[Mark]

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

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

[David]

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/

[Mark]

All set. Thanks

[David]

You’re welcome

[Author]

Posts