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

  1. Select a text element, such as a headline.
  2. Open the element settings and find font size.
  3. Set the desktop size first.
  4. Click the device icon and switch to the mobile view.
  5. Set the size you want on phones.
  6. 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?