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.
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.
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.
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.
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.
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.
Solution: 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.
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). 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.
Comments