How to test a site responsively

Here are the main steps you can take to test your website responds according to different devices.

First, access the EE Builder and enter the 'Responsive Editing' mode:

Entering responsive edit mode

There are two different methods you can use to perform responsive edits:

• Selecting the 'Responsive Editing' option: To access this option on any page, go to the Tools menu and select 'Responsive Editing' or just use the keyboard shortcut 'R'.

• Alternatively you can responsively edit on a per row, column or module basis by selecting the little Desktop icon that appears when editing that element. Here you can change the icon to a tablet to illustrate that you are viewing a tablet-sized device. Format and setting changes within this view will be applied for that particular screen size. The little Desktop icon is visible in most modules. Just toggle between the tablet and mobile view and apply the relevant styles that improve your design on smaller devices.

Spacing

You have the ability to override the default margin and padding settings on each row and column, if you think it's needed for tablet/mobile. Your design will always automatically adjust for smaller devices but you can still override these settings if required. 

You can read about how to update the spacing in greater detail here: Setting margins and paddings on smaller devices

Stacking & Visibility

By default, the EE Builder will automatically apply design responsiveness to make your content look good on different devices. In some cases you may want to edit sections yourself to further improve the layout. 

Visual checking 

We recommend to not completely rely on the view Responsive Editing Mode as some smart phones have many different screen sizes. For example, there are differences between the view on iPhone X and iPhone X Pro, so we recommend that you check through all device view options before publishing.