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:

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.

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.

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.
A space below the footer appears because your site's content is shorter than the viewport height (the length of the screen). You can rectify this issue by adjusting your page length, or by changing your background color.

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.

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.

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:

  1. Click the text box in your Editor.
  2. Click and drag the handles on the text box to extend it a bit beyond the end of the text (about 10-20 pixels). 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 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. 
Still experiencing issues?
If you've tried the above steps and are still experiencing issues with your site, you can contact our support team who will be happy to assist you. Click here to contact Wix support

Did this help?

|