Fixing mobile layout problems on Wix

Most mobile layout problems on a Wix Editor site come from one thing: the mobile view is generated automatically from your desktop design, and the result isn't always right. Wix says so itself: "Our mobile algorithm 'translates' desktop content for mobile but it's not always perfect." Elements end up in the wrong order, gaps appear, or something is hidden. The fix is to open the mobile editor, using the Mobile icon on the editor's top bar, and move, resize or unhide the elements there. Changes you make on mobile don't affect your desktop version.

The steps differ by editor, so find out which one your site uses before you start. A site built in the Studio Editor is responsive and uses breakpoints, and the fixes for it are different. So are the fixes for the newer Wix Harmony Editor.

First, identify your editor

Wix has three site editors as of October 2026, and each handles mobile differently.

You can tell the Wix Editor and Harmony apart by their layout. The Wix Editor has large icons down the left side. Harmony has its main actions along the top and an "Ask Aria" box at the bottom. The Studio Editor is part of Wix Studio, the platform Wix aims at agencies and professional designers. Sites can't be moved from one editor to another, so the editor you have is the one you fix. For the wider differences, see Wix Studio vs the Wix Editor.

Wix Editor: elements in the wrong place or overlapping

Open the mobile editor and work from the top of the page down.

1. In the editor, click the Mobile icon on the top bar.
2. Click the element that is out of place and drag it where it belongs. Wix provides two aids here: "Auto Space on Drag" and a "Spacing Guide".
3. If the element sits in the header, footer or menu, dragging may not move it out. Right-click it and choose Move To.
4. Resize text boxes and images that are too large for the screen width.
5. Check the result in Preview, then publish.

The order of elements on mobile is yours to decide. Side-by-side desktop content has to stack on a narrow screen, and the automatic order may not suit you, so read each page top to bottom as a visitor would.

Wix's own walkthrough is in its article on troubleshooting layout issues on your mobile site.

Gaps and extra white space

Large empty areas are a known side effect of the automatic mobile layout.

• Shrink the oversized element or shorten the page. This is the fix Wix gives for gaps.
• After hiding an element, check the space it left behind and close it up.
• Look for an element you can't see that is holding the space open: an empty text box, a transparent shape or an image behind another element. The Layers panel lists everything on the page.

Wix Editor: missing or hidden elements

If something on your desktop site doesn't appear on mobile, it has probably been hidden, by Wix or by someone on your team.

Why Wix hides elements on mobile

Wix automatically hides elements it considers unsuited to mobile. Its examples include hover interactions, third-party apps, and items that sit outside the page gridlines or have no space in the layout. Pinned desktop elements may also be hidden, and they aren't pinned on mobile.

How to bring an element back

1. Open the mobile editor.
2. Click Hidden on Mobile on the left side of the editor.
3. Find the element in the list and click Show Element.
4. Drag it into position and resize it if needed.

If it isn't in the Hidden on Mobile list

Wix's guide to hidden elements in the mobile editor suggests four checks:

• It may be inside a group, strip or box that is hidden. Unhide the container.
• It may be sitting behind another element. Check the Layers panel.
• The header or footer may be hidden on that page.
• It may have been moved into the menu box by accident.

A few rules about hiding are worth remembering. Hiding on mobile does not delete the element; it stays on desktop. To delete an element for good, use the desktop editor. Hover effects don't work on mobile even when you unhide the element, because a touchscreen has no hover. If important information only appears on hover on desktop, give it a visible version for mobile.

Wix Editor: adding mobile-only elements

Sometimes the answer is a different element for phones. In the mobile editor you can add elements that appear only on mobile and not on desktop. Wix also offers a set of Mobile Tools:

• Quick Action bar: a bar of quick contact buttons for phone visitors.
• Back to Top button: useful on long pages.
• Welcome screen: a screen that greets visitors.

Fonts that look different on phones

Text can render differently on an iPhone and an Android phone. Wix confirms that font rendering differs between iOS and Android and that some fonts aren't supported on iOS. Wix also states it does not support issues with uploaded fonts.

If your headings look wrong on one type of phone only, switch that text to one of Wix's default fonts and test again. If the problem is size, not style, adjust the font size in the mobile editor; it won't change the desktop size.

Wix Harmony Editor: what's different

Harmony sites are responsive without a separate mobile build. Wix's guidance is to design on desktop first and let the changes flow down, then fine-tune the mobile view, which does not affect desktop.

Two behaviors are by design:

• On mobile, header items other than the cart icon and logo move into the hamburger menu automatically. If a header button seems to have vanished, look in the menu.
• Moving elements between sections or containers is disabled in the mobile view. Make that kind of structural change on desktop.

Wix describes these in its guide to adjusting your Harmony site for mobile.

Studio Editor: breakpoint problems

A breakpoint is a screen width at which the layout changes. The Studio Editor's defaults are Desktop at 1001px and up, Tablet from 751px to 1000px, and Mobile from 320px to 750px. You can add custom breakpoints, and Wix allows up to 6 breakpoints in total per page. Designs cascade from larger breakpoints down to smaller ones, and not the other way.

When the live site looks different from the editor, Wix's Studio troubleshooting article gives these checks:

1. Confirm everything is published. Unpublished changes are the simplest explanation.
2. Check the viewport. Wix says viewports outside your defined breakpoint ranges "are not optimized." If the problem appears on one device, find that device's width.
3. Set the editing size to the problem width. Change the canvas to that viewport and adjust the layout there.
4. Use the same margin units for sibling elements. Mixing units makes neighbors scale differently.
5. Match parent and child behavior. Wix's example is a Fixed button inside a container set to scale proportionally, which causes gaps or overlap as the screen narrows.

Be careful when deleting a breakpoint. Doing so deletes the layout and design settings made at that breakpoint and widens the ranges of its neighbors.

When the editor looks right but the phone doesn't

If the mobile editor and Preview look correct and a real phone shows something else, the layout may not be the problem. Wix's live-site checks:

• Publish from the mobile view. Changes that aren't published aren't live.
• Update the browser and operating system on the phone, and use a supported browser.
• Clear the phone browser's cache and cookies, or open the site in a private tab.
• Hold the phone upright. Wix Editor mobile sites are "only supported on mobile devices in portrait mode."
• Check what device it is. Tablets generally show the desktop version of a Wix Editor site, so a layout problem on an iPad is a desktop layout problem.

Two specific cases come up often. If you upgraded from a free site and the Wix banner still shows on mobile, open the mobile editor and click Publish. If visitors can't tap into a form on mobile, look for another element overlapping the fields; our guide to Wix forms not sending covers the other form problems. And if your edits aren't appearing anywhere, see published changes not showing on your Wix site.

Don't switch off the mobile-friendly view

The Wix Editor has a setting, under the editor's Settings → Mobile Friendly, that turns the mobile view off so phones get the desktop site. It can look like a shortcut when the mobile layout is a mess. Wix says it does not support problems that arise from turning it off, and that doing so can hurt performance and SEO. Fix the mobile view; don't remove it.

How to test your mobile site properly

1. Preview in the editor at mobile size, and go through each page from top to bottom.
2. Open the live site on at least one iPhone and one Android phone. Fonts and spacing can differ.
3. Test the things visitors do: open the menu, tap the phone number, fill in a form, add to cart.
4. Check text size and tap targets with your thumb. If a button is hard to hit, it is too small or too close to another one.
5. Check the Mobile view of Wix's Site Speed dashboard. A mobile page carrying large galleries and images can also be slow; see why your Wix site is slow.
6. Repeat after every significant desktop change. In the Wix Editor, new desktop elements are added to the mobile view automatically, and their placement may need adjusting.

Conclusion

Mobile layout problems on Wix are rarely mysterious once you know which editor you're in. In the Wix Editor, open the mobile editor, reposition what moved, close gaps and check Hidden on Mobile. In Harmony, design on desktop and fine-tune on mobile. In the Studio Editor, find the breakpoint where the layout breaks and fix the sizing rules there. Then test on real phones before you call it done. If the mobile view needs more than tidying, a rebuild of the worst pages is sometimes quicker than patching; our Wix website services team can do either. More guides are in our Wix hub.

Frequently asked questions