How to change font size only on mobile in Webflow?

Large headings and body text that work on a desktop screen often feel oversized or break layout on mobile. Webflow lets you adjust font sizes at individual breakpoints without affecting larger views. Here is exactly how.

Adjusting Font Size at the Mobile Breakpoint

Font size changes in Webflow are breakpoint-specific. Any change you make at a smaller breakpoint overrides the value from larger breakpoints — but only at that size and below.

1. Switch to the mobile breakpoint in the top toolbar (mobile landscape at 767px or mobile portrait at 479px)
2. Select the text element you want to adjust
3. In the Style panel, under Typography, change the font size to your desired value
4. The new size applies only at this breakpoint and smaller ones

For example, if your H1 is 56px on desktop and you set it to 32px at the mobile breakpoint, it will be 32px on mobile but remain 56px on desktop and tablet.

Using the Tablet Breakpoint as an Intermediate Step

Sometimes a direct jump from desktop to mobile is too drastic. Adjust the font size at the tablet breakpoint (991px) first, then fine-tune at mobile.

• Desktop: 56px

• Tablet: 42px

• Mobile landscape: 32px

• Mobile portrait: 28px

This stepped approach gives you more control and avoids sudden jumps in text size as the viewport narrows.

Applying Changes to All Elements of a Type

If you want to change the font size for all elements using a specific class — for instance, all H1 headings site-wide — edit the class at the mobile breakpoint. Every element with that class inherits the change.

Do not create a separate mobile class for the same element type. Stick with one class and adjust its properties per breakpoint. This keeps your stylesheet clean and predictable.

Using Relative Units for Smoother Scaling

Pixel values give you exact control, but relative units can produce smoother results across many screen sizes.

• rem: Scales relative to the root font size. If the root is 16px, 2rem = 32px.

• vw: Scales relative to viewport width. 5vw = 5% of the viewport width. Useful for fluid typography.

• em: Scales relative to the element's parent font size.

A common pattern is using clamp() in custom code for fluid sizing:

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

This scales the heading smoothly between 28px and 56px based on viewport width, without requiring per-breakpoint overrides.

Common Mistakes to Avoid

• Editing at the wrong breakpoint. Always verify which breakpoint is active before making changes. Accidentally editing the base style affects all breakpoints.

• Overriding without checking cascading. A change at tablet cascades to mobile. If you want different values at each, set them explicitly at both breakpoints.

• Using too many unique classes. One class per element type, adjusted per breakpoint, is cleaner than creating mobile-specific variants.

Key Takeaways

• Switch to the target mobile breakpoint, select the element, and change the font size in the Style panel

• Changes cascade down — tablet edits affect mobile unless overridden again

• Adjust at multiple breakpoints for a gradual size reduction

• Use one class per element type and modify it per breakpoint

• Consider relative units or clamp() for fluid typography that scales automatically