Wix Mobile Editor Guide: How to Optimise Your Site for Mobile Devices
More than half of all website traffic now comes from mobile devices. If your Wix website does not look and function perfectly on a smartphone, you are losing a significant proportion of your potential customers. The Wix Mobile Editor allows you to make targeted adjustments to your mobile layout without affecting your desktop site. This guide explains exactly how to use it to ensure your site delivers an excellent experience on every device.
Step-by-Step: How to Use the Wix Mobile Editor
Step 1: Switch to the Mobile Editor
Open your site in the Wix Editor. At the top of the Editor, you will see icons for both desktop and mobile views. Click the mobile phone icon to switch to the Mobile Editor. The canvas will change to show a narrow, smartphone-sized view of your website, and you will see a message explaining that changes made here only affect the mobile layout.
Step 2: Navigate Through Every Page
Use the Pages panel on the left to navigate to each page of your site. Review every page from top to bottom in mobile view. Look for: text that is too small or too large, images that are incorrectly cropped, overlapping elements, buttons that are too small to tap comfortably, and sections that look broken or out of proportion.
Step 3: Adjust Text Size for Mobile
Double-click any text element in the Mobile Editor to enter editing mode. Select the text and adjust the font size as needed for the mobile layout. Body text should be a minimum of 14–16px on mobile. Headings may need to be smaller than their desktop equivalents to prevent them from taking up too much of the narrow screen width.
Step 4: Resize and Reposition Elements
Click on any element in the Mobile Editor to select it. Drag to reposition or drag the handles to resize. Elements that appear side by side on desktop often need to be stacked vertically on mobile. Rearrange elements into a single-column layout where possible to make them easier to read and interact with on a small screen.
Step 5: Adjust Image Crop and Position
Click on an image in the Mobile Editor and select Crop to adjust which part of the image is visible on mobile. Images that show a wide landscape view on desktop may need to be repositioned to focus on the key subject when cropped to a portrait or square format on mobile.
Step 6: Show or Hide Elements on Mobile
Some desktop elements may be unnecessary or distracting on mobile. Right-click any element in the Mobile Editor and select Hide on Mobile to prevent it from appearing on smartphones without removing it from the desktop layout. This is useful for decorative elements, complex animations, or supplementary sidebars that clutter the mobile view.
Step 7: Check Button and Tap Target Sizes
Buttons and interactive elements on mobile should be at least 44x44 pixels to be comfortably tappable with a finger. Check all buttons, menu items, and form fields are large enough. If any are too small, increase their size in the Mobile Editor.
Step 8: Check the Mobile Header and Navigation
Click on the header in the Mobile Editor to review your mobile navigation. The hamburger menu (three horizontal lines) should work correctly to expand the navigation menu. Confirm the logo is correctly sized and positioned. Add a click-to-call phone number or contact button in the mobile header if it is not already present.
Step 9: Preview and Test on a Real Device
Use the Preview button to see your mobile site as a visitor would. For the most accurate test, publish the site and then view it on your own smartphone or tablet. Real device testing often reveals issues that the Editor preview does not show, such as slow loading images or scrolling behaviour.
SEO Considerations for Mobile Optimisation
Google uses mobile-first indexing, meaning it primarily uses the mobile version of your site to determine how to rank it in search results. A poor mobile experience can therefore directly harm your desktop search rankings. Ensure your mobile site contains all the same important text content as your desktop site — do not hide key content on mobile. Keep page load times fast by compressing images and avoiding heavy animations.
Common Mistakes to Avoid
Never checking the Mobile Editor — Building and publishing your site without ever switching to the Mobile Editor is the most common mobile mistake. Always review every page in mobile view before publishing.
Hiding important content on mobile — Hiding key text or calls to action on mobile to simplify the layout can harm both user experience and SEO. Only hide purely decorative elements.
Tiny tap targets — Small buttons and links are frustrating to use on a touchscreen. Always ensure interactive elements are large enough to tap easily.
Assuming desktop changes automatically update mobile — Wix uses separate desktop and mobile layouts. Changes to desktop positioning and sizing do not automatically apply to mobile.
Practical Tips and Advice
Design for mobile first — When building or redesigning your site, start by optimising the mobile layout before the desktop. This forces you to focus on the most essential content and creates a cleaner result on both platforms.
Prioritise your most important call to action on mobile — Mobile visitors typically want to call, book, or buy. Ensure your primary CTA button is visible above the fold on every mobile page.
Check on multiple device sizes — Use Google Chrome's Developer Tools (press F12, then Ctrl+Shift+M) to preview your site at various mobile screen sizes, from small smartphones to tablets.
Mobile Editor Checklist
☑ Every page reviewed in Mobile Editor
☑ Text sizes appropriate (minimum 14–16px for body text)
☑ Images correctly cropped and positioned for mobile
☑ Buttons and tap targets sized for comfortable touch interaction
☑ Mobile header and hamburger menu working correctly
☑ No elements overlapping or falling off-screen
☑ Primary CTA visible above the fold on mobile
☑ Purely decorative elements hidden on mobile if needed
☑ Site tested on real mobile device after publishing
Frequently Asked Questions
1. Do changes in the Wix Mobile Editor affect the desktop site?
No. Changes made in the Mobile Editor only affect how the site appears on mobile devices. Similarly, positional and sizing changes made in the desktop Editor do not automatically update the mobile layout. Content changes (such as editing text) do affect both versions simultaneously.
2. Can I add elements that only appear on mobile?
You can hide elements on desktop and show them on mobile, but you cannot add entirely new elements that exist only in the mobile layout. Any element you add in the Mobile Editor will also appear in the desktop layout (potentially in an unintended position). Manage visibility using the Hide on Desktop and Hide on Mobile options in the right-click context menu.
3. Why does my Wix site look good in the Mobile Editor but bad on my actual phone?
The Mobile Editor preview shows an approximation of the mobile layout but may not be perfectly accurate. Factors such as browser rendering differences, cached content, and device-specific screen sizes can cause discrepancies. Always test your published site on multiple real devices, not just the editor preview.
4. Does Wix have a mobile app for managing my site?
Yes. The Wix Owner app is available for iOS and Android and allows you to manage various aspects of your business on the go, including viewing and responding to bookings, managing contacts, and checking site analytics. However, for full site editing, you need to use the desktop Wix Editor.
5. What is Google's mobile-first indexing and how does it affect my Wix site?
Google's mobile-first indexing means that Google primarily looks at the mobile version of your website when deciding how to rank it in search results. If your mobile site has missing content, slow load times, or a poor user experience, your Google rankings will suffer even if the desktop version is excellent. Optimising your mobile layout in the Wix Mobile Editor is therefore not just a user experience improvement — it is an SEO necessity.