[Resolved] Error found in CSS for changing font-size on mobile

[JoAnne]

Here is a problem I solved for you.

I couldn’t understand why my customization of changing font-size in site-title wasn’t applying to mobile.
Poking around in the Firefox Inspect tool, I discovered that the CSS code that was rendered was missing a comma.
The code rendered was

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

Once I added a comma just after “.navigation-branding”, the font-size was applied correctly.

Looking forward to the next update with this included!

[Elvin]

Hi there,

Can you link us to the site where this occurs? To check what’s actually happening to it.

I’ve tried replicating this issue but was unable to.

As for the selector, .navigation-branding .main-title is actually correct as it specifically wants to style the .main-title which is a child of .navigation-branding. https://share.getcloudapp.com/kpu4LKE4

[JoAnne]

Here is the site
judithclarkindexing.com

Maybe the problem is that the code for the tablet font-size is overwriting the mobile font-size.
This is what I found in the inline style sheet using Firefox Inspect tool:

.navigation-branding .main-title{font-weight:700;text-transform:none;font-size:60px;}

@media (max-width: 1024px){.main-title, .navigation-branding .main-title{font-size:37px;}}

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

I have added a login for you in case you need to visit the backend.

[Ying]

Hi JoAnne,

Looks like you are still using the old typography system, can you go to customizer > general and activate the new dynamic typography system?
https://docs.generatepress.com/article/switching-to-dynamic-typography/

Let me know if that works.

[JoAnne]

It works great under the new typography system.
Thanks.

[Ying]

Great!

You are welcome 🙂

[Author]

Posts