In this guide, you'll learn how to edit text on mobile, site-wide and in a specific stack so that it fits perfectly on any screen.
Site-wide settings: How to adjust text size on mobile
Stack Specific Styling: How to adjust text size on mobile
Site-wide settings: How to adjust text size on mobile
1. In your Dashboard, click on CHANGE DESIGN in the top left of your window.
2. Click on Headings & Paragraphs.
DESKTOP view is open by default. Under the DESKTOP tab, edit the font style, font size and colour of your headings as well as your paragraphs site-wide, to suit a desktop view.
As you update the design settings the changes will be made instantly to the content of the stack on your website and will automatically be optimised for your mobile website.
3. Check your mobile preview.
For a Mobile preview, save your changes, then flick over to Mobile Preview at the top-centre of your window to see the change.
We do recommend you check your mobile preview so that you can make any necessary design adjustments if needed. You are also able to check this by copying the link on the dashboard and looking at it through a browser on your phone.
4. Edit text for mobile.
Once you've checked your mobile preview and have identified the changes you'd like to make to your text, head back into SITEWIDE DESIGN SETTINGS and back into Headings & Paragraphs.
5. Click on the MOBILE tab to edit your text.
6. Edit the size of your text, and Save changes.
7. Check your mobile preview to see the change.
To do this, save your changes, then flick over to Mobile Preview at the top-centre of your window and see if you need to make any further changes to your text sizing on mobile.
Stack Specific Styling: How to adjust text size on mobile
First, you'll need to either add a Stack or select an existing Stack to edit. Learn about getting started with Stacks/Stack Specific Design options here.
Note: Stack Specific controls override the site-wide options.
1. Select the Stack you would like to make mobile text adjustments to.
Click the Edit design colour wheel at the right of your window, the Stack Specific Design Options menu will open.
3. Click on Headings & Paragraphs.
DESKTOP view is open by default. As you update the design settings the changes will be made instantly to the content of the stack on your website and will automatically be optimised for your mobile website. We do recommend you check your mobile preview so that you can make any necessary design adjustments if needed.
4. Select your font style and font size for your H1, H2, H3, and Paragraph respectively.
Text colour is important. You can fill in your colour number in this section if you have it. Alternatively, you can play with the colour wheel and make your colour selection from there.
5. Check your mobile preview.
Note: You won't have a live preview of any adjustments you make in Mobile view. For a Mobile preview, save your changes, then flick over to Mobile Preview at the top-centre of your window to see the change.
6. Edit text for mobile.
Once you've checked your mobile preview and have identified the changes you'd like to make to your text, head back into your Stack Specific Design Options and back into Headings & Paragraphs.
7. Click over to the Mobile tab to edit your text.
8. Edit the size and colour of your text for your mobile view and Save changes.
9. Save your changes, then flick over to Mobile Preview at the top-centre of your window to see the change.
For more Stack Specific Design Options, see our help guide here.