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. Below are some tips to ensure that your site is optimized for a phone, tablet, and web browser:
Mobile Optimization Best Practices
Keep Content Simple and Scannable
Use short paragraphs and clear headings
Avoid large blocks of text
Place the most important information near the top of the page
Use Mobile-Friendly Images
Avoid oversized images that take too long to load
Make sure text is not embedded into images
Check that images scale properly on smaller screens
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.
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.
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
Check Button Size and Spacing
Buttons should be easy to tap with a thumb
Avoid placing buttons too close together
Use clear, action-based labels like Register, Get Tickets, or RSVP
If it’s hard to tap, people won’t.
Navigation Menu Placement (Important Mobile Tip)
If your navigation menu overlaps your banner image on mobile, adjusting the menu position can help.
To keep the navigation menu above the banner on both desktop and mobile:
Go to Website Editor
Click on the navigation menu
Set the menu position to Relative
Using Relative positioning prevents the menu from overlapping images and keeps your layout clean and readable across all screen sizes:
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.
Before publishing your website, review this checklist on your phone:
☐ Text is easy to read without zooming
☐ Buttons are large enough to tap comfortably
☐ Images resize correctly and don’t push content off screen
☐ Navigation menu does not overlap images or text
☐ Registration and forms are easy to complete on mobile
☐ No horizontal scrolling is required
📌 Mobile Preview Tip
To preview how your event website looks on mobile, you can use Google Chrome’s Developer Tools . Open your website in Chrome, right-click anywhere on the page, select Inspect, then click the device (mobile) icon to switch to mobile view. This allows you to test different screen sizes and catch layout issues before publishing.
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.