Mobile Header

Hi there,

What's the preferable solution?

You can make the font size bigger on mobile with this CSS:

@media (max-width: 768px) {
    .main-title {
        font-size: 50px;
    }
    .site-description {
        font-size: 40px;
    }
}

Hi, Leo.

I tried this and nothing happened.

Please see my link to demo site: efc21c12.ngrok.io

Thank you.

I suppose the site title could stay the same. It is the tagline that is too large.

Is there any way I can control the font size of both so that I can play around until it looks right? Thank you.

Also, additional CSS in the Customizer is telling me that there are two errors. Thank you.

It should work but again I'm not seeing it being added.

Edited the CSS above so the tagline is included.

You will need to fix the CSS mistakes - it's stopping the CSS from being executing.

Hi, Leo.

I used the edited code above and that did the trick, except that I'm still getting this error:

Expected LBRACE at line 99, col. 5.

It is flagging the period before main-title.

What should I do?

Thank you.

And I just noticed that it change the size of the tagline when I'm in Desktop view. (Site title still seems to be the 66px I set in Typography.)

See link to demo site: efc21c12.ngrok.io

Thank you.

Edited the code above to correct the syntax error: https://generatepress.com/forums/topic/mobile-header-7/#post-494901

Thanks, Leo.

No problem!