Creating Responsive Sites With Wix
Whether you're using the Wix Editor or the Studio Editor, Wix offers a variety of tools to help you build a site that looks great on every screen.
With the Wix Editor, you can take advantage of full-width sections, strips and elements as they adjust to the visitor's screen size. In the Studio Editor, advanced options like breakpoint customization, scaling properties and responsive AI give you the precision to craft responsive, client-ready designs.
In this article, we'll discover how to create a responsive site in both editors.
Using responsive features in the Wix Editor
Wix sites built in the Wix Editor are becoming more and more responsive as we continue to add new and exciting features.
The mobile editor
Wix automatically creates a mobile-friendly version of your site using the content from your desktop site. Use the mobile editor to customize your mobile site's design, content, and enhance the experience for visitors.
You should know:
The desktop and mobile versions of your site represent different viewing modes of the same site; they are not separate sites. Changes to your desktop site affect your mobile site, while changes to your mobile site do not affect your desktop site.
Full width elements
The Wix Editor offers a variety of elements that can expand to fill the entire width of the screen, and adjust to the visitor's screen size (on desktop).
The following eleme nts are responsive when stretched to full width:
Sections and strips
Use sections and strips to organize and display content on your site. Both of these span the full width of the browser and adjust to the visitor's screen size.
Having said that, keep in mind that non-responsive elements (such as images, text and shape) will stay the same size across all screen sizes. This means your strip / section may look slightly different between browsers or devices – the spacing between elements, for example, may vary.
Full-width slideshows
Slideshows can be used for almost anything. You may want to use them to spice up your homepage, promote special deals or display presentations.
There are 2 types of slideshows in the Wix Editor - full width and box. If you want your slideshow to be responsive, make sure to choose a full width layout in the Add Elements panel.
Galleries
The Wix Pro Gallery behaves responsively in the Wix Editor when you choose certain layouts and set it to full width. This means that the position of your gallery items and their size may change when the browser window is resized across all devices.
Each layout behaves differently when set to full width and viewed on different screen / browser / frame sizes. Learn more about the Wix Pro Gallery responsive layouts
In addition to the Wix Pro Gallery, the Grid and Slider galleries can also be stretched to full width, making them responsive to various screen sizes.
Horizontal menus and lines
You can stretch horizontal menus and lines to full width so they span the entire width of the browser and automatically adjust to the visitor's screen.
Wix app elements and Google Maps
Google Maps and other apps created by Wix are responsive. You can stretch many different app elements to full-width, making them responsive to different screen sizes.
In the example below, the Wix Stores Category Page element is stretched to full width.
If the element has a Stretch icon
, it means you can stretch it to full width and make it responsive.
Note:
When using elements that can��t be stretched to full width (e.g. text boxes, images), make sure to keep them within the vertical gridlines so that your elements appear correctly on most screen sizes.
Building a responsive site on Wix Studio
You can build fully responsive, beautifully designed sites for your clients in the Studio Editor. With its cutting-edge features, the platform empowers you to create responsive sites with speed and precision.
Within the editor, you'll find an array of tools carefully curated to streamline your design process, ensuring ease, efficiency, and remarkable results for your projects.
Click below to learn about these tools and features.
Customization per breakpoint
The Studio Editor lets you tailor sites per breakpoint, so they always look great. Breakpoints are screen width ranges, representing the possible screens and devices that visitors tend to use (e.g. tablet, mobile).
We use a cascading concept when it comes to designing across breakpoints. Changes you make on larger breakpoints trickle down to smaller breakpoints, but changes on smaller breakpoints don't affect larger breakpoints.
Responsive behaviors for elements
When you add an element to the page, it already comes with a built-in responsive behavior. This means you don't have to worry about how the element looks on different screens - the responsive behavior ensures that it gets resized.
However, you may want to switch the responsive behavior, if you see one that is more suitable for your design.
Scaling design properties
When you set an element to scale proportionally, you can ensure that its design looks ideal on every screen. Enable the Scale properties toggle in the Inspector to make it happen automatically.
This is useful, for example, if your element has a defined border. The border might seem too thick and overbearing on small screens, or non-existent on large screens. With the toggle enabled, all you have to do is set the design you want on desktop.
Responsive AI tool for sections
Make your section responsive on all screen sizes in just one click, using the power of AI. The responsive AI tool identifies groups of related elements and applies the ideal layout tool for each group (e.g. stack, grid).
