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.

Centering Content with Columns

Use the Column 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. 

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

Making Use of Screen Settings

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. This allows you to hide certain elements for users depending on the device that they are viewing the store on.

Use the device toggles at the top of the editor to preview different screen sizes as you're building each element or section. Don't wait until the you're nearly finished your page.

Ensure Your Images are Responsive

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.

If you require the full image to be shown, consider using the Image Element instead. This element will ensure that your image stays in view of the user, without being cut off as a background image.

Did this answer your question?