Wix Editor: Fixing Layout Issues on Your Mobile Site

4 min read
Wix automatically creates a mobile-friendly site for you using the content and elements from your desktop site. They are not different sites, just different views of the same site.
Your mobile-friendly site is optimized to fit smaller screens, and the layout is changed accordingly. Because of this, you may notice issues with the structure or alignment on your mobile site. These issues can be resolved by rearranging and tailoring your content to create a clear, smooth experience for mobile visitors.
In this article, learn more about and find solutions for:

Elements appearing in the wrong location

Elements you have added to your page in the desktop Editor may be placed differently on the mobile version of your site. You can manually rearrange these elements by dragging them to your chosen location.
a GIF showing an image, then a strip being moved with the click and drag option.
If an element appears in the menu box, header, or footer of a mobile site, it is not possible to click and drag it around the page. However, you can move these elements between the menu, header and footer using the right-click menu. Learn how to move elements between the header, footer, and mobile menu
The right-click menu of an element in the mobile Editor. The 'Move to' option is highlighted.
Can't select the element?
If you can't click and move the element, something may be overlapping it (such as the header). Learn more about overlapping elements

Gaps on the mobile site

You may notice gaps on your mobile site. These can be caused by certain elements, or the page height.
Depending on where the gaps are, you can remove them by using the Zoom Out and Reorder function, changing the element layout, or by changing the page height. Learn more about removing gaps on your mobile site
If there are gaps that you still cannot remove, they may be caused by small elements that are hard to find. You can use the Layers panel to locate and move these elements forward or backward. Learn more about finding and moving elements
A site in the mobile Editor. The stretch handle has been highlighted.

Elements hidden from the mobile site

When editing your mobile site, you may notice that you can't find some elements that appear on your desktop site. This is because some elements are automatically hidden from your mobile site in order to make it more suitable for mobile devices. 
You can check which elements have been hidden from your mobile site, as well as set them to be shown, from the Hidden on Mobile panel. Learn more about hidden elements in the mobile Editor
The 'Hidden on Mobile' panel in the mobile Editor.
Did you know?
You can hide desktop elements from your mobile site, and replace them with mobile-only elements. These elements have plenty of customization options, so you can create a personalized experience that accurately reflects your brand or business on mobile. Learn how to add mobile-only elements

General layout issues

If you don't like the layout of your mobile site, or want to change its structure, you can refresh it by using the Page Layout Optimizer on the left side of your mobile Editor. This tool rearranges your page content, and optimizes the layout of your mobile site to further suit smaller screens. Learn how to optimize your mobile site
The Page Layout Optimizer in the mobile editor.
Important:
  • If you are experiencing mobile layout issues after completing the steps above, contact us in order for us to help resolve your issue. 
  • If you're building your site using the new Editor experience, you won't have access to the Page Layout Optimizer tool. This is because Wix automatically optimizes your mobile layout in the new Editor experience. 

Did this help?

|