Why does my Wix site look wrong on mobile?

How Wix handles mobile

In the classic Wix Editor every page has two layouts, one for desktop and one for mobile. Wix builds the mobile layout for you by stacking the desktop elements into a single column. The content is shared between the two, so the wording and images are the same, but the position, size and visibility of each element are stored separately for mobile.

When you add a new image, button or text box on desktop, Wix has to guess where it belongs in the mobile layout. It often lands on top of something else, or at a size that does not suit a narrow screen.

The most common causes

• Elements added on desktop after the mobile layout was tidied, which then overlap existing elements on mobile.
• Text that is too large or too small on mobile, so headings wrap over several lines or body text is hard to read.
• Elements hidden on mobile at some point and forgotten, such as a phone number, a button or a menu.
• Elements that overlap on desktop by design, for example text sitting over an image, which Wix cannot always stack sensibly on mobile.
• A site built in Wix Studio where elements were positioned freely rather than placed in a stack or grid, so they collide at smaller screen widths.

Fixing the mobile layout in the classic Wix Editor

1. Open your site in the Wix Editor and click the phone icon in the top bar to switch to the mobile view.
2. Go to the page that looks wrong and look for elements that sit on top of each other.
3. Drag each overlapping element to a clear space, or resize it, so that every element has its own room.
4. Click any text that is the wrong size and change the font size in the text settings. Body text at around 16 pixels is comfortable on most phones.
5. Open the Hidden Elements panel in the left hand menu of the mobile view. It lists everything hidden on this page on mobile. Show anything that should be visible, then move it into place.
6. To remove something from mobile only, select it and click the hide icon (the eye). It stays on the desktop site.
7. Click Preview to check the page, then Publish when you are happy with it.

If a page is badly jumbled, the mobile view also has a Page Layout Optimizer in the left hand menu. It rearranges the mobile layout of the current page automatically and can replace manual adjustments you have already made, so use it on pages that need starting again.

Deleting an element or rewriting text affects the desktop site as well. In the mobile view, hide elements rather than deleting them, and make wording changes on desktop.

If your site was built in Wix Studio

Wix Studio, and Editor X before it, does not have a separate mobile editor. It uses breakpoints, which are screen widths at which the design can change. You will see desktop, tablet and mobile breakpoints at the top of the editor. Design changes flow down from larger breakpoints to smaller ones, while a change made at the mobile breakpoint stays on mobile.

1. Open the page in Wix Studio and select the mobile breakpoint at the top of the editor.
2. Select elements that overlap and place them in a stack, which keeps them in order with fixed spacing as the screen narrows.
3. Adjust text sizes at the mobile breakpoint. These changes do not affect desktop.
4. Hide anything that is not needed on mobile at that breakpoint, then preview and publish.

Test on a real phone

1. Publish the site, then open it on your own phone using mobile data or a private browsing tab so that you are not shown an old saved copy.
2. Check every page, including the menu, the contact form and any shop or booking pages.
3. Tap every button and phone number to confirm they work and are large enough to press.

If a change makes things worse, Wix keeps earlier versions of the site under Site History in the editor, and you can restore one.

How to stop it happening again

• Each time you add or move something on desktop, switch to the mobile view and check that page before you publish.
• Keep desktop layouts tidy. Elements placed in clear rows and columns translate to mobile far better than elements layered over one another.

Related questions

Do changes in the Wix mobile editor affect my desktop site?

Moving, resizing and hiding elements in the mobile view only affects mobile. Deleting an element or changing the wording of text affects both, so hide elements on mobile rather than deleting them.

How do I get back something I hid on mobile in Wix?

Switch to the mobile view, open the Hidden Elements panel in the left hand menu and click the element you want to show. It returns to the page and you can then drag it into position.

Why does my Wix site look fine in preview but wrong on my phone?

Your phone may be showing an older saved copy of the page, or its screen may be narrower than the preview. Publish the site, open it in a private browsing tab and check again.