Wix Editor: Fixing Spacing and Alignment Issues on Your Site
8 min read
You may notice issues with alignment and spacing on either your live site or in the Editor, such as gaps, text rendering, or overlapping elements.
Read this article to learn about potential issues and their resolutions.
In this article, learn more about:
- Misaligned elements on certain browsers
- Gaps between the page content and footer
- Gaps below the footer on the live site
- Footers overlapping elements set to show on all pages
- Elements disappearing from your site header
- Misaligned text and elements on your live site
- Gaps between full width elements and other elements
Alignment issues on different browsers
Although Wix sites are optimized for most common devices and browsers, you may notice some differences in alignment between them. This is because different browsers and devices use different rendering engines, which can cause minor variations.
You can adjust your site elements to ensure their alignment on different browsers by adding them to columns, repeaters, or containers.
Solution 1 | Attach elements to columns
Solution 2 | Attach elements to repeaters
Solution 3 | Attach elements to container boxes
Gaps between the page content and footer
You might notice a small gap between the content of your page and the footer:
This can occur due to the page design, or because of the height of the page. The gap can be removed by adjusting the design or height.
Solution 1 | Changing the page design
Solution 2 | Adjusting the page height
Gaps below the footer
There is always a gap below your footer in the editor, as it allows you to resize the footer quickly and easily. However, you may notice a gap below the footer on the live version of your site.
This can occur if the content on your page is shorter than the current page length. There are several ways you can resolve the issue, depending on your design and preferences.
Solution 1 | Change the page background color
Solution 2 | Add content to your page
Solution 3 | Resize the footer
Solution 4 | Check for hidden elements in the Layers panel
Footer overlapping elements set to show on all pages
If you have an element on your site that is set to show on all pages, you may find that the footer overlaps it on some pages. This can happen if some of your pages are shorter than your element.
To fix the issue, drag your footer down with the Adjust Page Height icon 
.
. 
Elements disappearing from the site header
You may find that some of the elements in your header disappear (or fall behind the header) on your live site. This can happen for 2 reasons:
- Your header has a scroll effect that makes it freeze
- Your element is not set to show on all pages
You can resolve this issue by changing the header's scroll effect, or adjusting the element's display settings.
Solution 1 | Changing the header scroll effect
Solution 1 | Setting an element to show on all pages
Text misaligned on your live site
Sometimes your live site's layout can appear differently on different screens and browsers, with elements not aligning as intended. This may be caused by browsers rendering fonts and other elements differently.
You can set a certain height for your text box, ensuring that even if the text becomes slightly larger or smaller on another browser, it does not affect the way the boxes are aligned on the page.
To set a height for your text box:
- Click the text box in your editor.
- Click and drag the handles on the text box to extend it a bit beyond the end of the text (about 10-20 pixels).
Tip: This does not affect the size of the text itself.
Gaps between full-width elements and other elements
Certain elements can be stretched to full-width on your site, such as lines, horizontal menus, and some galleries. Elements that have this option display a Stretch icon 
when you click them.
when you click them.When you stretch an element to full width, gaps may appear between the full width element and elements placed above or below it. You can resolve this issue by using the Zoom out function or moving the element.
Solution 1 | Zooming out to remove gaps
on the top bar of your editor. In this view, you can move full-width elements up or down, or delete the spaces between them. 
Solution 2 | Manually moving elements
Still experiencing issues?
If you've tried the above steps and are still experiencing issues with your site, contact Wix Customer Care and we'll be happy to assist you.
Did this help?
|