Wix Editor: Working With the Editor Gridlines
Updated: 7 days ago
Gridlines are the dotted lines inside the editor that can help you ensure visitors can see your content on every screen size. Place all of your elements between the gridlines to prevent viewing issues on smaller devices (e.g., elements getting cropped).
The gridlines are only visible inside the editor, but you can always disable them if you prefer it.
How do the gridlines work?
Visitors don't see the gridlines on your live site. They are there as a guide to help you map and design your site better.
It's important to place all of your content inside the vertical gridlines to ensure it's visible across different browsers and devices. Elements that are placed outside the vertical gridlines might be cut off on tablets and smaller screens.
Full-Width elements
You can place full-width elements like Strips and Galleries on your page, even if it seems they don't fit between the gridlines. Having said that, make sure that important content (e.g., text, buttons, etc.) is still placed inside the vertical gridlines.
Tip:
The width of the page inside the gridlines is fixed at 980 pixels. The height of your page doesn't depend on the gridlines, but the content of your page.
Enabling or disabling the editor gridlines
You can enable or disable gridlines as you please, directly from the top bar of the editor. Simply select or deselect the checkbox in the Tools drop-down menu.
To enable or disable the editor gridlines:
Click Tools
at the top of the editor.
Select or deselect the Gridlines checkbox.
Gridlines in Columns
Columns have gridlines that are separate from the editor gridlines. As in the editor gridlines, you should place your content within the column's vertical gridlines to ensure that it appears correctly across devices and browsers.
The column gridlines override the editor gridlines. This means you can place elements outside the editor's vertical gridlines, as long as they are inside the column's gridlines.
How can I tell the difference between the gridlines?
Editor gridlines appear dotted while the column gridlines are solid and appear in blue.
These are the editor gridlines:
These are column gridlines:
FAQ
Below are some of the most frequently asked questions about the editor gridlines. Click a question to read its answer:
I can't see the gridlines in my editor. Why?
You should check the following if you can't see the gridlines:
Make sure they're enabled:
Click Tools
at the top of the editor.
Verify that the Gridlines checkbox is selected.
Check your browser's zoom setting. Reset your browser zoom by doing the following:
PC: Press down the Ctrl + 0 keys.
Mac: Press down the Cmd + 0 keys.
What happens if I place elements outside the gridlines?
These elements might be cut off on tablets and smaller screens. For this reason, we recommend placing all elements between the vertical gridlines.
Some elements in the editor are full-width by default (wider than the gridlines). While these elements adjust to the visitor's screen size automatically, we still recommend placing important content inside the gridlines.
What is the actual width between the gridlines?
The width of the page inside the gridlines is fixed at 980 pixels.
Tip: The height of your page doesn't depend on the gridlines, but the content of your page.
This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!
Comments