Screen Sizes and Devices

Breakpoints (also called screen sizes) are pixel ranges that correspond to the width of different devices, such as desktop, tablet, and mobile. When the width of a device is within a breakpoints predefined pixel range, the layout of the site is adjusted so the content and design is optimized for that device size and orientation. For example, if I am viewing a site on a desktop computer I can view the full site menu, but when I view the site on my mobile device, I see a hamburger menu instead.

Following are the breakpoints offered in the editor:

If you make design, layout or content changes to the default desktop breakpoint, the changes are automatically applied to the other breakpoints. If you change content, such as adding a widget, editing text, or adding or deleting a section, the change automatically applies to all other breakpoints, regardless of which breakpoint the change was made on. For example, if you add a widget on the tablet breakpoint, the widget will be added on all other breakpoints as well.

However, if you make changes to the position or size of an element on specific breakpoints, the changes will not apply to other breakpoints. For example, if you change the size of an element on the mobile breakpoint, the change will only apply to the mobile and mobile landscape breakpoints and no other breakpoints.

Switch Between Device Views

Responsive websites work on desktop, tablet, and mobile. For this reason, our responsive editor lets you preview the site in each of these views while editing. This lets you check how your site looks on different devices before you publish, ensuring that your customers have a positive experience no matter what device they are using to view the site.

To switch device views, click on one of the device buttons in the top navigation bar:

The different device views are not separate versions of your site. Deleting an element in one view (for example, mobile), removes that element from the entire site (desktop, tablet, and mobile). Instead of deleting, right-click on the element and select to hide an element on a specific device.

Device previews do not always reflect precisely what you see on an actual device. Features like fonts, size of the device window, user interface and browser behavior can all cause these previews to be inaccurate to various degrees. For the most accurate version of the site, check on a real device.