Wix Editor: Troubleshooting Layout Issues on Your Mobile Site
3 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.
As your mobile site gets automatically optimized to fit smaller screens, you may notice alignment or structural issues. This guide will help you resolve such problems.
In this article, learn more about:
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.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/12/07/1b931671-81d8-4a4f-914a-c687c198ba4c/d261b7a8-43fe-4bf1-8c54-99d4183d2c52.gif)
If an element appears on the menu, header, or footer of a mobile site, it is not possible to click and drag it around the page. However, you can use the right-click menu to move these elements between the menu, header and footer.
![The right-click menu of an element in the mobile Editor. The 'Move to' option is highlighted.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/08/e639a1ec-53c6-44ec-a024-d1e839f862c5/d7545fa9-b50b-4a14-a0da-9b610dc47a5c.png)
Tip:
When placing an item in the gap between elements, you may need to adjust the spacing. Use the Auto Space on Drag tool to automatically create even spaces between the 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 may be able to remove them by changing the element layout, or by shortening the page length.
![A screenshot of the handle you drag at the bottom of a page to shorten its length](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/09/03/f360343f-9db6-46b1-b7e5-0be4ae9d5b2a/925fd83a-6eb5-476c-b004-859f148b7bb2.png)
Tip:
The Spacing Guide tool shows you the existing gaps on your section (in pixels). It also shows an indication when these gaps are equal to one another.
Elements hidden from the mobile site
When editing your mobile site, you may notice that you can't find some elements that appear on desktop. This is because some elements are automatically hidden from your mobile site in order to make it more suitable for mobile devices.
Check which elements have been hidden from your mobile site, and unhide if needed, from the Hidden on Mobile
panel.
Did you know?
You can hide desktop elements from your mobile site, and replace them with mobile-only elements. Create a personalized experience that accurately reflects your brand or business on mobile.
![The 'Hidden on Mobile' panel in the mobile Editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/12/07/b8e3a689-72aa-4703-a20f-cf27e9e797a9/9baeac75-fb22-4688-a281-10e028b3e8de.png)
Did this help?
|