Learn how to make your pages look great on both desktop and mobile with a great responsive design, ranging from the use of the Column Element, making use of Screen Settings and how to ensure that your images are responsive.

Use the Columns Element to center and align elements horizontally. This will ensure that your content will look great on mobile. Instead of your content looking cluttered on mobile, the Column Element will stack your content to make it more readable to your visitors. 

The Maximum Width and "auto" Margins settings can also be used to responsively center content without the need for columns. Details on this process can be found in our "How to Center Elements" guide.

We recommend that you do not use more than 25px of Margins or Padding on the left and right sides of an element. Consider using percentages for side margins & padding (click on the "px" next to those fields to select "%").

Screen Settings allow you to create unique viewing experiences depending on the device that your user is viewing your site on. You can design for widescreen, desktop, tablet and mobile. This can help you design for mobile users, as well as desktop users. 

Use the device toggles at the top of the editor to preview your content at various screen sizes. Check the device previews throughout the page building process to avoid any unexpected final results in other views.

When using background images on your page, it's worth noting that if you go down in screen size, your image may be cropped as the screen size is reduced. This occurs because background images act as wallpaper; they cover the entire area of their section. The amount of the background image that is visible is determined by the height of the content/section and the width of the screen.

If you require the full image to be shown, consider using the Image Element instead. This element will ensure that your entire image stays in view of the user. The image will also scale down proportionately based on the width of the screen.