Responsive options available

The EE Builder has the following responsive options built in:

Breakpoints

By default there are three device sizes: 

1. Large: Desktop and Laptop displays – what you view by default when in the page builder.
2. Medium: Tablet displays – by default this will be from 992px or less.
3. Small: Mobile displays – from 768px or less.

Device sizes are determined by breakpoints set on the browser width. You can read about how to determine the device sizes in the 'How to test a site responsively' article.

Stacking

You can control how columns and modules are stacked and ordered as the screen size shrinks or grows. Column stacking can be controlled by setting custom widths for each different device size. To read how to control columns please refer to the 'Columns' and the 'How to set mobile friendly columns' articles.  

Spacing

Some content in Desktop view may have large padding that affects the design quality on Mobile view. By default the builder will automatically adjust the margin and paddings for rows, columns and modules. However, you can override these options and apply your own spacing on a per row, column and module basis for both tablet and mobile. You can read how to adjust spacing in the 'Setting margins and padding for tablet/mobile devices' article. 

Visibility

You have the ability to control the visibility of rows, columns and modules on different devices. By default, all modules will be visible at every device size unless you specifically set the visibility to Large and Medium devices only. For details please refer to the 'Setting content visibility by device size' article.