Website (Premium Editor)

Change the font size on mobile devices

Change the font size for mobile devices from the Mobile view in the website editor: select the text element or widget and adjust its font size there. Mobile font sizes are independent of desktop, so a font size change made in the Desktop view does not override text that already has its own mobile font size.

Open the Mobile view

Switch to Mobile from the device icons in the editor's top navigation bar before editing a font size you want to apply only on mobile.

  1. Open the website page in the editor.

  2. Select Mobile from the device icons in the top navigation bar.

For the full set of device-specific layout controls, see Edit your website for different devices.

Change the font size of a text element

For a regular text or title element, select the text and use the Typography settings control in the inline toolbar above the text.

  1. Click the text to enter editing mode.

  2. Select the text by clicking and dragging over it.

  3. Open Typography settings in the inline toolbar.

  4. Change the font size.

For other inline text formatting options, see Edit text, buttons, and links.

Change the font size of a data-connected text widget

Data-connected text widgets expose their text settings in the Design Editor instead of the inline text toolbar.

  1. Select the widget in the Mobile view.

  2. Open its text settings in the Design Editor.

  3. Change the font size.

Changing text settings in the Design Editor overrides the widget's theme settings and breaks its connection to the site theme.

Why mobile and desktop font sizes are separate

Font size changes are device-specific, so a change made in the Desktop view does not affect text that already has its own font size in the Mobile view. Site-wide text works the same way: Customize your website theme keeps separate font size values for desktop/tablet and mobile.

Review the mobile result

Check the font size in the Mobile view, then open the page on a real mobile device before publishing, because the editor preview can render fonts differently from an actual device.

  1. Review the text in the Mobile view.

  2. Open the page on a real mobile device and confirm the size.

When your edits are ready for the live site, publish the page or republish the site.

Was this helpful?
Was this helpful?