Quick answer · Building a website · 2 min read
How do I set a different font size on mobile in Wix Studio Two?
Set it in the text style. Each text style in Site Styles has its own size and spacing for each breakpoint, with optional minimum and maximum sizes. Wix hasn't documented a per-breakpoint size for a single text element.
Key points
- Text styles have separate sizes for each breakpoint.
- Styled titles and paragraphs pick up style changes; unlinked text doesn't.
- For one-off text, create a separate text style.
Set it in the text style. In Wix Studio Two, each text style in Site Styles has its own size and spacing for each breakpoint, with optional minimum and maximum sizes. Change a heading style's mobile size and every element using that style updates. Wix hasn't documented a per-breakpoint font size for a single text element, so styles are the way to do it.
How do you change a text style's mobile size?
- Open Site Styles from the left of the editor.
- Go to the Text Styles tab and open the style you want, for example your main heading.
- Set its size and spacing for each breakpoint, such as Desktop and Mobile, in px. Add a minimum and maximum size if you want it kept within limits.
- Check a page on the mobile breakpoint to see the result.
What else should you know?
- Every site starts with nine text styles: six headings and three paragraphs. The defaults can't be renamed or deleted, but you can add your own.
- Apply a style to text from the text style dropdown on the action bar.
- Text added as Styled titles and paragraphs is linked to Site Styles. Plain Titles and paragraphs aren't, so they won't pick up style changes.
- Changing a font in the Fonts tab updates every style that uses it.
- If one piece of text needs its own mobile size, the safest documented route is a separate text style for it.
Our take: set heading sizes for mobile before you build pages. It saves fixing them one page at a time later. Read how Site Styles work in Wix Studio Two, or see our Wix Studio 2 service.