Is there a way to specify different font size for mobile ?

Hi @chillmen

Which font are you trying to change exactly?

At the moment there isn’t an option to change the font size on mobile view only, I’m afraid you will have to use CSS to achieve this.

You can add the CSS to the Additional CSS section by adding wp-admin/customize.php to your site’s link.

Hi @thelmachido,

I’ve add a dropdown menu into a page and when changing screens size, it’s too big or too small.
I sort of found a solution by using the predefined fonts sizes “S” “M” etc…
I’ve got a better result.

I still don’t want to touch the css for now ??

Thanks a lot for your help
have a nice day

@chillmen “I sort of found a solution by using the predefined fonts sizes “S” “M” etc…
I’ve got a better result.”
How did you exactly use the “S” “M” sizes for mobile? I’m trying to change the font size for mobile on the query block because it is too huge but can’t figure it out.

• This reply was modified 2 years ago by AlexGraphicD.

@thelmachido) “At the moment there isn’t an option to change the font size on mobile view only, I’m afraid you will have to use CSS to achieve this.”

How is it that there isn’t an option to change the font size for mobile view?? This is a very integral feature, fonts cannot be static size for all the different devices. There should be an easy way to set responsive font size from the block settings or styles.

How is it that there isn’t an option to change the font size for mobile view??

There are a few ideas developers have been looking into concerning blocks, the TT3 theme uses blocks. For example, having fluid Typography meaning as the screen size reduces so should the size of the text. You can follow the progress or add what you think could be useful here:

https://github.com/WordPress/gutenberg/pull/39529
https://github.com/WordPress/gutenberg/issues/27107

If you would like to look at using CSS in the meantime let me know what you want to achieve.

@thelmachido I want to have a heading on a cover block and when you view from mobile the heading needs to be smaller. How can I achieve fluid typography basically? I just noticed that the theme has smaller heading on mobile and bigger on desktop as shown on this screenshot, how can I achieve the same, via custom css?

I just noticed that the theme has smaller heading on mobile and bigger on desktop?as shown on this screenshot, how can I achieve the same, via custom css?

This is achieved by default, the size isn’t adjusting on your site?

If it isn’t are you able to share a link to your site so that I can check to see how it looks on smaller screens?

@thelmachido “This is achieved by default, the size isn’t adjusting on your site?” Yes! I just noticed now. My browser was not displaying the font size correctly when window was smaller and it fooled me thinking that the font size is static. It is great that font size change is fluid and not to have to worry about changing it manually for smaller screen sizes.

My browser was not displaying the font size correctly when window was smaller and it fooled me thinking that the font size is static. It is great that font size change is fluid and not to have to worry about changing it manually for smaller screen sizes.

I agree, and it sounds like your typography is changing size depending on the screen size for you as well?

@thelmachido Yes, it looks like it does…

Hi @alexgraphicd thanks for the update, I will be marking this issue as resolved for now. If you have any questions or want to addon you can reach out here.

For text size that you can customize for desktop, tablet, or mobile, use an “Advanced Text” block. It will come up with an H3 heading by default, but you can change it to a different heading level or to a paragraph. This block will let you customize your font size based upon the preview mode that you’re in.