[Resolved] Is there a way to make the header Text responsive?

[Amer Kladnjakovic]

Hey 🙂
I bought your theme and its great but now I dont know how to make the text responsive in the header.
What I mean you can see here: http://www.straberger.at

When you resize the screen the text over the video is moving togehter but does not change size. How can I fix this?

Thanks!

[Tom]

Hi there,

Right now you’re using the <font> element and setting a size.

That’s no longer valid HTML, and isn’t responsive.

Instead, you’ll want to wrap that text in a div with a class:

<div class="my-font-size-class">
   Some text
</div>

Then add CSS for it:

.my-font-size-class {
    font-size: 30px;
}

Then add responsive CSS for it:

@media (max-width: 768px) {
    .my-font-size-class {
        font-size: 17px;
    }
}

Hope that helps you get started 🙂

[Amer Kladnjakovic]

Yup got it.. 😉
Thank you 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts