Hi… I have a site design that looks good on a desktop. This question is regarding how to change font size based on the screen size.
On the desktop view, I have h1 set to a font size of 40px which looks good there for my purposes. But when viewed on a mobile device the font size of 40px is too large so I would like to set it smaller.
What are the best methods for setting the h1 font size smaller when viewed on a mobile?
If you have created a selector for the h1 and set font-size to 40px via the All Devices tab, the simplest option would be to click on the Tablet or Phone tab and set the font-size to something lower. Maybe a gradual decline from Tablet to Phone.
Another option is to focus on Typography more globally. You could create a folder called Typography, and then create broad selectors for all headings inside it. By broad, I mean just the h1, h2 stuff. Rather than e.g. .sidebar h3. You can then set the font-size of text at different screens sizes site-wide, using the responsive tabs as I explained above.
