Developing your website using Wix is a great choice if you don't want to get your hands dirty with long lines of code. But it comes with one rather big problem.
Wix websites aren't fully responsive out of the box and sometimes look hideous if you're trying to access them from a smaller device.
In this blog post, I'll take you through exactly how you can make your next Wix website responsive using what's called column strips.
What the heck is Wix?
Chances are you're not familiar with the rather popular website building company called Wix. It's basically a platform where people like you and me can launch a blog, online store, portfolio, forum, and much else.
They've been rapidly growing since 2010 and is now accessible in more than 190 countries across the world – making them one of the most popular choices when it comes to building a website.
Are Wix websites fully responsive?
No, Wix websites aren't fully responsive. When designing a website in Wix, you're essentially designing one website for desktops and one for phones.
It makes it terribly easy for beginners to design "responsive" websites. However, it's not the ideal solution if you want your website to look silky smooth across all screen sizes.
Let's say Wix uses 480px as the breakpoint for phones. If you're then accessing your website on a phone that measures 620px, you likely won't stay for long.
That's not the case with a fully responsive website.
A fully responsive website has multiple breakpoints where the elements on the screen will shrink or expand in size according to the breakpoints.
If you want to learn more about breakpoints and what responsive design really means, take a look at Kinsta's "Beginner’s Guide to Responsive Web Design".
How to make Wix websites fully responsive
Using column strips
One way to make your Wix website fully responsive is to use column strips. Click Add on the left side of the editor. Then click Strips.
Once you've selected your strip, drag it over to your website.
Then click Layouts and hit Add Column. It'll split the strip into two columns.
This will ensure that your text remains aligned when viewed on different screen sizes. It's a rather simple workaround but not the most ideal.
Stretching elements to full width
Another workaround is to stretch your elements to full width. They'll expand to take up the entire space on your screen – meaning they'll auto resize.
To stretch an element, select it in the editor and hit the stretch icon and expand it all the way to the very edge of the editor.
It's again, not a very intuitive workaround. The absolute best tip is to transfer your entire website over to what's called Editor X.
Editor X: The Wix replacement
In 2020, Wix launched a new platform that promised fully responsive website creation – Editor X. Wix lists one of the features of the platform as having stack and scale media that will provide “seamless responsive behavior”. It also features advanced sizing control which allows web designers to define fixed or fluid elements on their website.
While Editor X is a part of the Wix franchise, they are different platforms. However if you like Wix templates and features, it is a good alternative to the Wix platform that can guarantee fully responsive websites.
While the Wix platforms do not provide fully responsive websites, most of their templates offer mobile websites. There are however many cons to using an alternative website. Although the website may not be fully responsive you can use the methods I described to improve the responsiveness of your webpage.