All Collections
Getting Started
Next Steps
Responsiveness: Make your pages great for mobile
Responsiveness: Make your pages great for mobile

Learn responsive design and how to make your pages optimized across devices for mobile, tablet, laptop and desktop.

Updated over a week ago

Learn how to make your pages look great on both desktop and mobile with responsive design by applying flexible spacing and device-specific styles. Learn how to ensure that your images are responsive.

Centering Content Responsively

Applying a Maximum Width and "auto" side Margins settings can be used to responsively center content. Details on this process can be found in our "How to Center Elements" guide.

Using Flexible Spacing

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 "%").

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 desktop, laptop, tablet and mobile. This can help you design for mobile users, as well as desktop users. 

Applying a device-specific style in Shogun

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.

Understanding the Difference Between Images and Background Images

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.

A background image will crop to the device width.

Note: The above concepts also apply to videos and background videos.

Did this answer your question?