How do I change font-size for mobile?

[Judy Asman]

Hi, Andre,
Will you please advise as to how I can change my h1 font sizes in the custom mobile CSS section? Would you happen to know a solution?

I tried adding different styles to all of the mobile screen sizes you include but none of them worked. http://judyasman.com/judyasman_wp/

The font I use will not show up in IE — just FF, Chrome and on my device. Either way, the text is overlapping when it wraps.

Thank you!

[Sushil Adhikari]

That would make for a good blog tutorial …. I made a note. However, to change the font sizes with media queries (responsive sizing), here is an example:

@media (max-width: 480px) {
	h1 {font-size: 14px; line-height: 1;}
	h2 {font-size: 12px; line-height: 1;}
}

Usually a good idea to add a line-height as well, although it’s a personal preference how the line height is done, some will do it in a px value or em value. The media query will also depend on what screen size you are editing font sizes for as well. The example above means that any screen size from 0 to 480px (generally a landscape view on a phone), your font sizes will be what you see in the example.

The above example can also be used for anything else you need to adjust at that screen size.

[Judy Asman]

Thanks, Andre! I agree with you about the blog tutorial. That would be so kind of you. Meanwhile, thanks for this solution and quick response. I will give this a try and let you know how it works!

[Judy Asman]

Thanks again, Andre! This worked for me. Very helpful 🙂

[Author]

Posts