[Resolved] Site title not scaling for mobile

[Michel]

Hello,

The theme seems solid and I’m considering buying the add-ons, but I have this one problem:

I type a site title into the header, but when I adjust for smaller screen sizes, the title remains large and the words become broken up. This doesn’t look good at all. Is there a way to scale the header so that the site title keeps it’s original layout?

Thanks

[Tom]

Hi there,

Trying to figure out how to do this automatically, but it’s kind of difficult as there’s so many combinations people can be using.

You can target the site title on mobile using this simple CSS:

@media (max-width: 768px) {
      .main-title {
            font-size: 20px;
      }
}

You can adjust the px to whatever you like.

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Let me know if you have any other questions 🙂

[bdbrown]

That’s what I’ve done. Pick two or three break points, create a media query for each one, and reduce the font size as the viewport becomes narrower. Another option is to use an image and make it responsive.

[Author]

Posts