[Resolved] Site title and tagline font sizes on different devices

[coco]

I’m trying to get my site title and tagline fonts to have the same proportions on the tablet and the mobile as on the desktop.

When I click on the device icons in “customize > appearance > site identity” and make font size adjustments that make the site title and tagline look right on those devices, they then mess up how it looks on the other two devices. It keeps going like this every time I make a change in one place, it messes up another.

Is there a way to make the site title and tagline adjust proportionately? Or manually by device without it changing the other two?

Thanks!

[Leo]

Hi there,

Having a big title like this definitely makes it a bit more difficult for responsive mode.

I would recommend manually set it for tablet and mobile with some CSS like this:

@media (max-width: 768px) {
    .main-title {
        font-size: 70px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .main-title {
        font-size: 90px;
    }
}

More info here: https://docs.generatepress.com/article/responsive-display/

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

Let me know if this helps 🙂

[coco]

Perfect, thank you!

[Leo]

No problem 🙂

[Author]

Posts