Make Text Mobile-Responsive
You can set a different font size for phones than for desktop, so headlines stay readable on small screens without shrinking on large ones.
How the views work
The builder has a device switcher near the top. A change made in the desktop view also applies to mobile until you adjust mobile separately. A change made in the mobile view affects mobile only.
Set a mobile font size
- Select a text element, such as a headline.
- Open the element settings and find font size.
- Set the desktop size first.
- Click the device icon and switch to the mobile view.
- Set the size you want on phones.
- Switch back to desktop to confirm it was not changed, then Save.
Elements that support it
- Heading, sub-heading, paragraph and bullet points.
- FAQ title and content text.
- Button text and button sub-text.
- Headline and text in image feature elements.
- Social icon text, with font family, size, weight and color per device.
Tips
- Large desktop headings often need a drop of 30 to 40 percent on mobile.
- Keep body text at a comfortable reading size.
- Preview on a real phone before publishing.
Good to know: Adjust desktop first, then mobile, so you only need to override the small screen.
Was this article helpful?
