[Support request] CSS for paragraph text that is large, and responsive

[Joseph]

Let’s say I want something that is in a large font, say 48px, for desktop. Don’t want to use a heading because it’s unimportant text (SEO wise). But I want it to be responsive, so 28x on mobile, for example. I can copy CSS and manipulate it to how I need it, but not good at creating it out of thin air.

I’ve seen prior posts about @media but how do I create a special class or selector so I can use this throughout the site?

[Leo]

Hi there,

You can do this for the HTML:
<p class="large-font">Some text</p>

Then this would be the CSS:

p.large-font {
    font-size: 48px;
}
@media (max-width: 768px) {
    p.large-font {
        font-size: 28px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Author]

Posts