Design from the desktop down to the smaller displays.

On the top menu you can see 4 icons representing the 4 breakpoint options.

If you’d like to activate or deactivate one or all of the responsive displays, you can do by checking the checkbox included in the icon tool-tip. When the site is published a deactivated display will "inherit" the next display up.

When selecting each breakpoint, the content area will be marked accordingly. This means that you need to adjust the pages elements so that they fit into this area for proper display.

You can adjust element's position and size, as well as other properties, for each breakpoint. You can set these on the right side panel or adjust it manually by dragging the element.

If you’d like to hide a certain element from one of the displays, you can do this on the right side panel under the Element Visibility section. This comes in handy when adjusting the site to smaller displays and focusing on the site’s main content.

Note: In order to make sure that your design works properly across all breakpoints, make sure you are not overlapping the display edges and the divider between the content and footer - and do not place elements under the footer. All of the above can cause display issues in your site.