Customization for different devices
To create a user-friendly website for any device, you need to customize it to different screen resolutions. This is achieved by setting different styles for elements (e.g. position on the Canvas or size) that will be used with different screen resolutions.
Breakpoints option allows you to set the screen size (display modes) at which the styles of elements will change. You can find this option on the Top Bar.
You can choose from the following Breakpoints options:
- Desktop - base breakpoint
- Tablet - 991px and down
- Mobile Landscape - 767px and down
- Mobile Portrait - 479px and down
You can add extra Breakpoints:
- 1280px and up
- 1440px and up
- 1920px and up
You can switch to the desired screen size using the list in the Breakpoints option, or on the top of the Canvas. Hover the mouse cursor on the top panel of the Canvas and select the desired mode by moving the cursor across the panel and then clicking on the selected option. For convenience, different modes are highlighted in different colors.
Styles on different breakpoints change in two way:
- from base breakpoint (Desktop) down to smaller screen sizes (Mobile devices)
- from base breakpoint (Desktop) up to the larger screen sizes (1280px, 1440px, 1920px)
This means that:
- Styles set for elements on the base breakpoint (Desktop) apply to all other modes by default.
- When you change styles for Tablet mode, the styles for smaller screens (Mobile devices) also change. However, these changes are not applied to Desktop mode.
- When changing styles for 1280px mode, the styles for the larger screens (1440px and 1920px) also change. However, these changes are not applied to Desktop mode.
- Styles are applied to other display modes until they are overridden. You can override inherited styles on any breakpoint.
To set styles:
- Switch to the desired breakpoint (Tablet, Mobile Landscape, Mobile Portrait, or one of the advanced modes).
- Style elements for the selected breakpoint in the appropriate sections on the Styles tab.
For example, you can change the size and position of elements, their paddings and margins, the number of elements in the List or Block List. You can also hide elements on certain breakpoints.
Changed styles are displayed on the Styles tab in the color corresponding to the breakpoint to which they are applied:
You can change styles for all or selected breakpoints.
Styling example for different breakpoints:
