How To Make A Wix Website Responsive (Fit To All Screen Sizes)

Written by JJTPOSTS

As a new Wix user it can be very frustrating to try and make a website responsive on all platforms and screen sizes. Whether you find that your text is being cut off on small screens, horizontal scroll bars are appearing, or your content simply isn’t filling larger screen sizes, Wix website creation can be a rough and time consuming experience. Fortunately, Wix does provide all the tools that you need to fix these problems, you just need to learn them!

In this article you will learn how to optimize your Wix website to be responsive with all screen sizes and devices. The following features provided by the website building platform will allow your elements, text, and photos to fill the screen on every device you use.

Make sure all strips and content are set to “Stretched”

We are starting out with a pretty simple tip to help get a more responsive site. Strips are an important tool that Wix provides you to help create a more responsive website. Not only does a strip make it so that all your content in a grouped area can be moved together, they also allow for the strip background to be fully stretched across the entire screen. The “stretch” feature on every strip and element that has this option, allows for 100% responsiveness on all devices and screen sizes for the given element.

You can tell whether an element on Wix can be stretched by clicking on it, then looking to see if there is a two way arrow icon in the tool box. The image below shows the button that you will be looking for.

Ensure all content is within the pages gridlines

One common mistake made by Wix users is creating a webpage on a large screen resolution, just to find out that their content doesn’t show on a laptop or tablet screen. When designing a webpage there are two gridlines that go down the page you are working on. These are used to show the website builder which content will be featured on all screen sizes. Anything outside of the gridlines can either be cut out on smaller screens, or cause a horizontal scroll bar on the bottom of a website. This problem can be annoying, but is easily solved by keeping all of the content within the gridlines or implementing columns.

Make use of columns (Change column sizes)

Creating columns on a webpage can be a bit of extra work when designing, but certainly makes all of the difference when it comes to website responsiveness. Similar to the website's default page gridlines, each column has its own optimization grid line. This means that whatever is placed inside of the columns core section will be shown on every display size.

Utilizing the column feature will allow a website to have content completely fill the screen, yet still scale to display size in a beautiful fashion. In addition, columns can change sizes by clicking on the column strip as a whole, then choosing the layout button. This will allow for columns to be set to any desired size, meanwhile creating larger or small gridlines in each column.

Using full-width slideshows, galleries, and maps.

Similar to strips, you can stretch slideshows, galleries, and maps to fully take up the width of any screen. Using full-width slideshows and galleries will create a visually appealing factor to your website. The addition of a map will help your viewers locate a specific spot that you want to emphasize. Along with being fully responsive, each of these features have many unique preset customizations to make your website designing session easier.

Edit the mobile version

Last but certainly not least, if you are new to Wix, always remember to check your site’s mobile design. Wix offers a button at the top of your screen to change your editing preview into a mobile view. This is important to check after adding any form of new content and even after minor changes. Small changes to a desktop version of your website can destroy the design of your mobile app and it can be very annoying. Remember to stay calm and have lots of patience when working on your mobile website, as it can become very tedious.

The video below will show you a visual representation of the topics covered in this article. We hope that this helps you understand the content we covered better!