Optimize Wix Page Sizing For All Monitors

Wix offers a range of tools to help you create a website that is compatible with different screen sizes and devices. The Wix Editor has a fixed page width of 980 pixels, chosen for compatibility with a range of smart devices such as iPads and tablets. Wix Studio Editor allows you to set the sizing in pixels, with responsive behaviour automatically adjusting your site for other screen sizes. The Wix platform also offers advanced sizing options, such as fluid sizing, fixed sizing, and the ability to use different CSS units of measure to ensure your website is displayed properly across different monitors.

Fluid vs. fixed sizing

When creating a Wix website, it is important to consider how it will appear on different screens and monitors. This is where the concepts of fluid and fixed sizing come into play.

Fixed Sizing

Fixed sizing, also known as fixed-width layout, refers to setting specific pixel widths for the elements on a web page. The width of these elements remains the same across all viewports and does not adjust according to the screen size. In other words, the elements are "fixed" in place and do not shrink or grow. Fixed sizing provides consistency in terms of design and is generally easier to implement. It ensures that the widths are the same for all browsers, eliminating potential issues with images, forms, videos, and other content. Additionally, there is no need to worry about minimum or maximum width settings. Fixed sizing is often preferred for portfolio websites, where designers want more control over the layout and can better manage images with fixed widths.

Fluid Sizing

On the other hand, fluid sizing, also known as fluid layout or liquid layout, uses percentages or relative units to determine the width of elements. This means that the widths of the elements adjust proportionally to the user's screen resolution or browser window. Fluid sizing ensures that the website is usable across different device types and screen dimensions. It provides a more seamless user experience, as the layout remains similar regardless of the screen size. This approach is particularly beneficial with the increasing popularity of smartphones and tablets, which have varying screen sizes. Fluid sizing also tends to result in faster loading times due to fewer adjustments needed for element positioning and sizing.

Choosing the Right Approach

The decision between fluid and fixed sizing depends on the specific requirements of your Wix website. Fixed sizing offers more control over the design and is generally easier to work with. On the other hand, fluid sizing provides better adaptability to different screen sizes and improves usability for mobile users. It is worth noting that Wix's Editor X and Studio Editor provide tools to set element sizes and responsive behaviours, allowing you to choose between fixed and fluid sizing options.

Using the Wix Editor

The Wix Editor allows you to create a website that is compatible with different screen sizes and smart devices, such as iPads and tablets. The fixed width of your site in the Wix Editor is 980 pixels, a size chosen for compatibility with a range of devices. While you can design your site outside of these borders, it is recommended that anything added is decorative and not vital to the browsing experience.

To make your site more responsive, you can stretch elements to full width, spanning the width of the browser regardless of screen size. This can be done by clicking on the desired element, clicking the Stretch icon, and enabling the "Stretch to full width" toggle. You can then set the margins, which are the spaces to the left and right of the element. Margins can be set by pixels or a percentage of browser size, with a limit of 190 pixels or 5% of browser size.

You can also unstretch an element by clicking on it, clicking the Stretch icon, and disabling the "Stretch to full width" toggle. This will restore the element to its original size.

In the Wix Editor, you can set the sizing in pixels (px), and the responsive behaviour will adjust accordingly. Every element has a default behaviour, such as "scale proportionally", which controls how it is resized on other screens. This default behaviour can be changed to suit your needs.

The Wix Editor also offers advanced sizing, which allows for deeper customisation of element size per breakpoint. This mode lets you see the measurements being used and adjust them as needed. Advanced sizing can be enabled by selecting the relevant breakpoint, choosing the element, clicking the Open Inspector arrow, and enabling the Advanced Size toggle.

Testing on different screens

Use Actual Devices

To truly experience how your Wix page appears and performs on different screens, it is recommended to use the actual devices you want to test. This could include different laptop models, tablets, and smartphones. By using the devices yourself, you can see how your page adapts to various screen sizes, resolutions, and technologies.

Google Chrome DevTools

If you don't have access to a wide range of devices, Google Chrome's DevTools can be a helpful alternative. DevTools is an emulator that allows you to simulate different devices and screen sizes. To use this method:

• Open the Google Chrome browser.
• Click the "Customize and control" icon at the top right.
• Hover over "More Tools" and select "Developer Tools."
• Click the "Toggle device toolbar" icon.
• Click the "Responsive" drop-down menu and select the device you want to emulate. You can also select "Edit" to emulate a device not listed.
• Reload the page to see your Wix site as it would appear on the selected device.

It's important to note that DevTools and other third-party emulators should be used as guidelines only. They may not perfectly represent your site's full browsing experience, so using actual devices is still the best approach.

Wix Editor and Studio Editor

The Wix Editor and Studio Editor provide tools to help you design a responsive site. In the Wix Editor, you can stretch elements to full width, making them span the width of any browser, regardless of screen size. This ensures that your site adapts to smaller screens without losing the full-width appearance of certain elements.

Additionally, the Wix Studio Editor allows you to set the sizing in pixels (px), which is a fluid size unit relative to the page's editing size. The responsive behavior then takes care of the rest, automatically resizing elements on other screens. You can also choose from various responsive behaviours, such as "Scale Proportionally," "Relative Width," and "Stretch," to control how your elements adapt to different screens.

Test on Multiple Browsers

Different web browsers may render your Wix page slightly differently due to variations in how they interpret code. It's a good idea to test your page on popular browsers like Chrome, Firefox, Safari, and Edge to ensure consistency across platforms.

By following these testing strategies, you can ensure that your Wix page is properly sized and optimised for a wide range of monitors and devices, providing a seamless experience for your visitors.

Stretching elements

Stretching an element in Wix can help make your site more responsive. This feature allows you to stretch an element to the full width of your browser, regardless of the screen size. This means that even if your visitors view your site on a smaller browser, the element will still be displayed at full width.

To stretch an element, follow these steps:

• Click on the element you want to stretch in the Wix Editor.
• Click on the Stretch icon.
• Enable the "Stretch to full width" toggle.
• (Optional) Set the margins by clicking on the number field and choosing between pixels or a percentage of browser size. You can use the slider to increase or decrease the margin size.

It is important to note that not all elements can be stretched. Currently, only the Posts Gallery blog element can be stretched to full width. Additionally, you can only stretch elements added in the desktop editor, and not mobile-only elements.

If you want to unstretch an element, simply follow the same steps and disable the "Stretch to full width" toggle. This will restore the element to its original size.

Another option for stretching elements is to use the Stretch handles. These are handles that you can click and drag to resize the element as you prefer. Stretch handles are available on most elements in the Wix Editor, giving you more flexibility in designing your site.

When stretching elements, you may notice gaps appearing between the stretched element and the elements above or below it. To remove these gaps, you can either move the elements or use the Zoom Out and Reorder function in the Wix Editor.

Additionally, when using the Wix Editor, you have the option to stretch your columns. To do this, click on the strip that contains the columns, then click on the Stretch icon. You can choose to stretch the strip to the full width of the screen or to the page size within the gridlines.

Working with breakpoints

When it comes to "Working with breakpoints", the following information can be taken into account:

Wix offers two primary editors for designing websites: the Wix Editor and the Studio Editor. Both editors provide tools and settings to ensure your Wix page is sized properly for all monitors and devices.

In the Wix Editor, the width of your site is typically fixed at 980 pixels. This standard width is chosen to accommodate most users and ensure compatibility with various smart devices, such as iPads or tablets. While you can design your site beyond these borders, it is recommended that any content placed outside the 980-pixel width be primarily decorative rather than vital to the browsing experience.

To make your Wix site more responsive, you can utilise the "Stretch to full width" feature. This option allows you to stretch elements to span the entire width of the browser, regardless of the screen size. Once stretched, you can set margins to the left and right of the element, providing a responsive design. The margins will adapt accordingly on different desktop screens and browsers.

In the Studio Editor, you can set the sizing in pixels (px), and the responsive behaviour will automatically adjust for different screen sizes. Every element comes with a default behaviour, such as "scale proportionally", which controls how it resizes on other screens. You have the option to change this default behaviour to suit your specific design needs.

The px value in the Studio Editor is a fluid size unit relative to the page's editing size. This means you can design in pixels that represent the size on the canvas, while the element remains responsive. You can also utilise advanced sizing, which allows for deeper customisation of the element's size per breakpoint. This mode lets you see the measurements behind the scenes and adjust them as needed.

Additionally, in the Studio Editor, you can set the element's size and responsive behaviour per breakpoint. You can select an element and drag the side handles to resize it, determining its appearance on the current breakpoint. The Inspector panel provides the exact width and height in pixels, and you also have the option to enter custom width and height values.

Frequently asked questions