top of page

How to Design Mobile Friendly Wix Website?

Updated: Jul 9

Wix website designers and users often ask us how to design mobile-friendly Wix websites. This article will help you to understand how to create a mobile-friendly website in Wix with a proven everyday practice of a Wix Partner.


Throughout this article, you will learn more about the followings:

  1. Using strips and columns properly,

  2. Leaving gaps between page elements and gridlines,

  3. Checking layers often,

  4. Get your text content share the common size in pixels,

  5. Hide unnecessary elements on mobile,


How to Design Mobile Friendly Wix Website?

Mobile Friendly Wix Website


There are many best practices to make your Wix website is mobile friendly.


1. Use strips and columns properly


Strips and columns not only give you a chance to manage page layout but also are powerful editor elements allowing you to design sections with more freedom. Here are the best practices for using strips and columns:


  • Always use strips while designing a page (at least most of the time),

  • Add columns if you need stunning two-column-like sections,

  • Don't add more than four columns to a strip (the area you will use to add texts and images will be getting even smaller as you add more),

  • Add a strip background first and then add columns (this will save you time much),

  • If you are not sure about the design, don't add gaps between the columns,

  • If it is required to make a design the content and title are separate from each other a bit vertically, use another strip (child) attached to the main strip.


Following these best practices will help the editor to turn a clean mobile website when you try to switch to "mobile website editor".

Strips and columns not only giving you a chance to manage page layout but also are powerful editor elements allowing you to design sections with more freedom. Here are the best practices of using strips and columns:

You can also try the followings:

  • Dividing a strip into two columns for landing sections, one column for texts and CTAs, and another for images,

  • Dividing a strip into three or four columns for highlighted services or solutions a brand offers.

2. Leave gaps between the page elements and gridlines


Adjust your element content at the center by equally spacing from both horizontal sides. This will protect this column and section to go crazy looking when you switch to the mobile editor.


Align texts where you would like them to be, but don't forget to use the best practices for aligning texts.


Adjust your element content at the center by equally spacing from both horizontal sides. This will protect this column and section to go crazy looking when you switch to the mobile editor.

3. Check layers often


Sometimes having a page with tens of sub or child elements gets you and your mobile editor confused. Make sure each child's elements are under the required parent elements.


The layers tool helps you to manage your page sections and elements by parent-child hierarchy.


Sometimes having a page with tens of sub or child elements gets you and your mobile editor confused. Make sure each child elements are under the required parent elements.  Layers tool helps you to manage your page sections and elements by parent-child hierarchy.

Hint: You can use Layers tool to reorder your strips. See how:

  • Click one of the layers on tree,

  • Drag it onto another one.

Make practice with couple of them.

4. Get your text content to share the common size in pixels


Elements having the same width will appear on the mobile editor with less breakdown. If you have two or three or even more text elements than one under the other, set the same width size for those elements. They must be aligned well horizontally, too.

Elements having the same width will appear on mobile editor with less breakdown. If you have two or three or even more text element that one under the other, set the same width size for those elements. They must be aligned well horizontally, too.

At this point, if you think that your mouse (not you, haha) is not as accurate as you supposed it to be, you can use the toolbar. It allows you to set the exact location of each page element and its size.


At this point, if you think that your mouse (not you, haha) is not as accurate as you supposed it to be, you can use the toolbar. It allows you to set the exact location of each page element and its size.

To access the toolbar, click on "Tools" tab and then click on "Toolbar" to activate it on the screen.


To access the toolbar, click on "Tools" tab and then click on "Toolbar" to activate it on screen.

There is the tricky point with setting element positions in Wix. You can check our Wix Element Position Tutorial for further information.


5. Hide unnecessary elements on mobile


Not all elements that exist on the desktop version are needed on the mobile version of your website. To make your mobile website more user-friendly, hide some elements from the mobile version.


Not all elements exist on desktop version are needed on mobile version of your website. To make your mobile website more user friendly, hide of some elements from mobile version.

While you are trying to hide or show mobile elements, parent elements might be removed from mobile sites with their children.


In addition to all these advices, for a better view on mobile also try the followings:

  • Use smaller size texts on mobile,

  • Make the button heights the same,

  • Don't use three lines of heading text,

  • Check your mobile site menu and design.


Hope you are now ready to get your Wix website more optimized and mobile-friendly.

 

You are ready to go. If you have further questions in your mind, feel free to reach us any time.

0 comments
bottom of page