The website created on our platform is mobile-friendly. However, there are some design choices you can make to ensure that your website is viewed similarly on all mobile phones or tablets. Here are some tips to ensure that your site is optimized for a phone, tablet, and web browser:
Use "Standard Images" not "Background Images"
Because background images don't have a fixed aspect ratio, so may appear cropped on phones and smaller devices. Standard images appear as a fixed-aspect ratio image, so will appear the same on mobile as on the desktop. If you don't want the photo to be cropped, simply convert the photo a standard image.
Step 1: When hovering over the background image you want to edit, a pop up box on the right will appear. Click on Edit Section Image & Spacing.
Step 2: Click to Display as: Image. This will convert background image to a fixed-aspect standard image.
Please note: With Standard Images, any overlay text on the image will be hidden. If you want to have that text added to your Standard Image, we recommend to edit the image with the text on the image and re-upload the image.
Use Recommended Image Sizes that work best on Mobile Devices
For banners: use images at least 1600x1000px (ideally 2400x1600px) at 72DPI (max 1mb). If you’d like the image to use a fixed aspect ratio, I’d recommend adding a full-width image.
For images: use images that at least 250 pixels and set to display at 100% width on any device.
Adjust Font Size For Mobile
Step 1: When in Website Editor, hover over the text you want to edit and click Edit.
Step 2: A Text Format Menu will appear on the top of your screen.
Step 3: Click 'Aa' the Font Icon for the Text Style Menu to appear on the left.
Step 4: Check the box "Use different font size on mobile" and Enter Mobile Font Size (px)
Here are mobile font recommendations to ensure your website, retreat pages, and landing pages are easy to read, beautifully styled, and optimized for small screens:
Mobile Font Size Recommendations
Element | Recommended Size |
Body text / Paragraphs | 16px (minimum), 17–18px ideal for readability |
Subtext / Labels | 14px |
Section Headings | 20–24px |
Main Page Titles / Hero Text | 28–32px |
Buttons / CTAs | 16–18px text + minimum 44px height for touch |
Navigation Links | 16px |
Captions / Footnotes | 12–14px (use sparingly) |
Step 5: Save Website
Best Practices for a Mobile-Friendly Site
1. Keep Sections Short and Clean
Avoid overly long blocks of text or stacking too many images. Use headlines, spacing, and short paragraphs to keep your content easy to skim.
2. Use Standard Image Blocks for Key Visuals
Images added as elements scale better on mobile. Use background images for visual ambiance only—avoid putting text or logos inside them.
3. Center Key Content
Align important text, buttons, and images to the center whenever possible to keep everything readable and visually balanced on narrow screens.
4. Preview on Mobile Before Publishing
In the Website Builder, click Preview, then resize your browser or use the mobile preview option to see how everything looks on smaller screens.
5. Limit Columns or Side-by-Side Layouts
Too many columns can appear squished or stacked oddly on mobile. Stick with single-column layouts or ensure each element still reads well when stacked.
🛠️ Optional Edits to Improve Mobile Flow
Adjust padding/margins in Section Settings to create breathing space.
Break long sections into multiple shorter ones.
Avoid custom fonts that may not scale well.