Devices and screen sizest


Right from the editor, you can preview your page on multiple devices. At the center top of the editor, you will find four icons indicating the window size of the preview. Each device corresponds to the following screen sizes:

DeviceScreen width
Small Screen400 pixels
Medium Screen800 pixels
Large Screen1100 pixels
Extra Large Screen1920 pixels

Style for devicet

Breakpoint Selector

If you select any component on the page, you will be able to change its styles at the right sidebar, like background, typography, position, and many more properties. If you come from a web development background, it is where you will edit the CSS of the component.

One crucial element of this sidebar is the screen size selector or breakpoints. It starts with a value of Base. As implied by its name, all properties defined in this state will be applied to all screen sizes. Suppose you change this select to, for example, Medium. In that case, you will notice that all values previously defined will disappear, a