How To Make Your Site Work On Multiple Devices (Phones, Tablets etc.)

Knowledgebase Article

How To Make Your Site Work On Multiple Devices (Phones, Tablets etc.)

Your website will automatically adjust for different device types, and you may preview how content looks across different devices right from the editor. You can make fine tune adjustments to how content appears on different devices, such as adjusting the margin and the padding, or you may show custom content for specific device types.

For best results, whenever you add a new section, we recommend viewing how it looks on each device as you build the site. In this way, you can be confident that the section you are working on will work well on mobile as it does in desktop, before you potenially go onto duplicate that piece of content or the entire page. If you leave verifying how your content looks to the last moment, i.e. after you've created all of your pages, then you risk having to go back and make adjustments across a larger number of pages. It is therefore much better practise to ensure that your content looks appropriate on different devices as you build out each item of content.

Viewing your Site as Different Devices

You can view how your site will look across different devices right from within the editor.

Use the device type selectors at the top of the editor to switch between different devices. The content will adjust to show you how it will look on each device.

Adjusting Padding/Margin for Different Devices

Often you may wish to reduce the margin or padding of a part of your website to reduce this on smaller devices, or remove it altogether.

In the spacing menu, you can adjust the scale factor of an elements padding and margin.

Adjusting Font Sizes for Different Devices

Your font selection is defined in your Styles tab. You can access this from:

Click the Advanced tab and you can additionally define a scaling factor for different devices. This allows you to reduce the font size on devices with smaller displays.

Controlling Visibility across Different Devices

Sometimes you might want to have specific content shown only on certain device types. This can be controlled by adjusting the visibility of the element, and turning off/on visibility on some devices.