How To Make Your Wix Website More Responsive

If you're a Wix user, chances are you're well acquainted with the two vertical gridlines in the Wix Editor. You know that keeping your website elements within these lines is key to maintaining its responsiveness.

In this post, however, I’m going to share my tips on how to “outsmart” the system and utilize further space on the screen when designing your website.

But before we delve into those tips, let's address why it's crucial to keep your website elements within those central lines.

The gridlines in the central part of the Wix Editor define a safe zone visible to all visitors, regardless of their device screen size. With a width of 980px, it's designed to cater to devices from tablets and beyond.

What happens if you step outside the gridlines?

Wix warns us not to place any elements outside the gridlines for a simple reason. And that is, visitors on smaller screens may miss out on content, leading to elements being cut off or misplaced unintentionally.

If you’re on MacBook, your browser’s viewport width is 1800px - which is almost twice the size of the width Wix lets you work with. And that can feel rather limiting and frustrating. But don’t worry. You can still design a gorgeous website with elements populating the whole width of the screen while keeping your site perfectly responsive. How?

1. Use strips

In Wix, a strip is a horizontal element that can be subdivided into additional columns while preserving responsiveness. By utilizing strips, you can effectively divide the screen width into multiple sections, making use of space that extends beyond the gridlines.

In addition, you can play with the layout of your columns, type in your desired ratio in which they’re going to be divided and even customise the layout inside individual columns.

How to use strips in Wix

Let’s design a strip with 3 columns with a 25%:50%:25% ratio.

To add a strip, start by selecting the + button from the left vertical menu in your Wix Editor. Under Add Elements, select Strip and pick a classic white strip. The strip will be added to your page.

In the next step, click on the strip and select Layout and then Add Column. This option will divide our strip into 2 equal columns. In order to add the third column, click on Manage Columns and then Add Column once again. Now we have 3 equal columns and it’s time to change their proportions.

Click anywhere outside the strip to close the pop-up and now click on the strip again. This time, select Layout. As you scroll down, you’ll come across Customize Proportions where you can start typing your desired ratio. Always start from the left and proceed to the right. Once you’ve typed the proportion of the first column, the others will adjust automatically.

Now that we’ve nicely divided our strip, it’s time to populate it with elements. (I’ll leave that one up to you.) But before placing anything inside the columns, I want you to click inside individual columns. Notice that, just like the page without strips, even the columns inside the strips have their own vertical guidelines and you need to stick to the rule of keeping the content between them.

The reason for this is simple. As your page width shrinks (on different devices), certain parts of your website’s width will inevitably be lost. What we’ll lose in our case will be the empty space outside the gridlines.

Setting the width of a strip

2. Use full-width slideshows

Slideshows are a popular choice for their dynamic appeal and ability to fill the entire screen. When using a slideshow, you can select a background picture that will fill the whole screen, but keep in mind that any text elements and buttons have to be placed into the space between the gridlines to stay visible when the screen shrinks. There is just no way around it here.

While not inherently responsive, their background fills the whole width of the screen which, at least, allows you to utilize the space outside the gridlines to some extent.

Can you add a strip to a slideshow?

Unfortunately, there is no way to make the full-width slideshow responsive in the Wix Editor. If you attempt to drag a strip into the slideshow, the strip will overlay it but it won’t respond to the change of slides.

3. Use full-width elements

In Wix, we can’t place any elements too close to the left and right border of the screen. But there are plenty of elements that can be stretched so that they reach all the way there. These elements are;

• Repeaters (Add Elements > List > Blank Repeaters)

• Galleries (Add Elements > Gallery)

• Menus (Add Elements > Menu & Anchor > Horizontal Menus)

• Lines (Add Elements > Decorative > Themed Lines)

• Strips (Add Elements > Strip > Classic Strip)

To stretch any of these horizontal elements to the whole width of the screen, click on the double-sided arrow button that reads “Stretch”. In the pop-up, select Stretch to full width and as you’ll notice, the element will be stretched to the whole screen.

If you wish to add some margins, you can select up to 190px margins. The margin will be applied symmetrically to both sides of the element.

4. Overlay elements

Say you have already used a strip and divided it into more columns, yet where you want your element to be is outside the gridlines of the column. In this case, you can use another strip, set the background colour to 0% opacity and place it over the first one.

While this option is not ideal, it can work in some instances. Just keep in mind that when the screen shrinks, the top element will be subject to a different behaviour than the element in the strip underneath across different screen sizes.

5. Use background images

Similar to full-width slideshows, section backgrounds offer another opportunity to utilize screen space efficiently.

Unlike slideshows, however, section backgrounds can be made responsive by adding a strip. This way, you can place text elements and buttons literally anywhere on your screen and occupy the whole width of the screen. In addition, you can also apply some nice background scroll animation which will give your page a sophisticated touch of elegance.

6. Don’t underestimate the mobile layout

Speaking of adapting to different screen sizes we must not forget about the importance of mobile layout. With majority of users coming to your website on mobile devices, there’s no doubt that the mobile layout must be refined to the last detail.

Luckily, adjusting the mobile layout in Wix is easy. You just need to take time and do it properly and make sure that no 2 elements overlap each other or are lost beyond the borders of the screen (which sometimes happens with repeaters).

7. Design your website in Wix Studio

If the limited space of the screen in the Wix Editor sounds too restrictive for you, why not try Wix Studio? Wix Studio is a more advanced website builder designed with responsiveness being the top focus.

Not only you can finally utilize the whole screen space, but it also comes with advanced layouts and grids and it lets you decide how you want each element to behave on different screen sizes.

Why does responsiveness matter?

Website responsiveness is the ability to adapt to different screen sizes. So while it’s important that your website looks good on your laptop screen, it also needs to adapt to bigger and smaller screens, such as a desktop computer, iPad or mobile.

In simple terms, responsiveness means that the website can adapt to different viewport sizes whilst distributing content in a way that every element is readable and that no elements disappear or overlap each other.

How to check whether your Wix site is responsive?

This is, in fact, so simple. You don’t need any plugins or tests. All you need to do is preview your website in your browser and shrink the width of your browser window. As you’re dragging the border of your viewport, you can watch how your website adjusts to different screen sizes all the way down to 980px. If there are no elements lost, cut off or misplaced in the meantime, your site’s good to go!

What happens if a website is not responsive?

Neglecting responsiveness can result in content loss or impaired readability on smaller devices, detracting from the user experience and potentially impacting search engine rankings.

So is website responsiveness important? In the age of various devices, having a website that’s responsive is non-negotiable.