Archived topic

CSS for paragraph text that is large, and responsive

1 reply · Started by Joseph on September 14, 2019

Viewing posts 1–2 of 2

September 14, 2019 at 11:08 am #1009521

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?

September 14, 2019 at 11:19 am #1009529

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 :)

This archived topic is closed to new replies.

Start building better websites today.