All Webador websites use responsive design, which means the website automatically adapts to the screen size of the device being used - whether that's a PC, laptop, tablet, or mobile device.
It can be tricky to get both the desktop and mobile versions of your website looking just right, so we'll share some tips.
Columns
You can use the Column element to separate your content when you have multiple elements placed alongside each other. These columns will be placed one on top of the other in mobile view.
When you place the Column element on your website, it automatically creates 3 columns, as shown below. You can drag and drop other elements within your columns to add content.
A common error is placing each content element in its own Column element, which creates 3 vertical and 3 horizontal columns at once and looks something like this:
and here's how that looks on mobile:
So, when you're filling one column with content, remember to place all content elements inside the same, single Column element, as shown below.
Mobile view:
Tables
The Table element is ideal for adding information with multiple rows and columns, such as menus and opening hours. The Column element is unsuitable for this due to the way it displays the content:
As the screenshot shows, using the Column element results in a list of days followed by a list of times, which is less than ideal for displaying opening hours.
With the Table element, your opening hours will display as intended on all devices, including computers:
and mobile devices:
White space
To create space between columns in mobile view, you can use the Spacer element. This only works if you place the Spacer element under each individual column, not under the Column element as a whole:
Here's how that looks on a computer:
The following example shows the result when the Spacer element is placed under each individual column.
Here's how that looks on a computer:
and here's how it looks on mobile with the Spacer element between all columns:
Column alignment
If you use columns on your website, you'll want to keep in mind the alignment for mobile view.
A common error is aligning elements in the left column to the left, elements in the middle column to the center, and elements in the right column to the right. This looks fine on computers and laptops, but not on mobile.
Here's how it looks on a computer with left, center, and right alignment:
and here's how it looks on mobile with left, center, and right alignment:
All elements in all columns must be center aligned to display properly on both computers and mobile devices.
Here's how it looks on a computer with center, center, center alignment:
and here's how it looks on mobile with center, center, center alignment:
