The structure of the page is inherently responsive, i.e the layout will be adjusted automatically for all screen sizes. In addition to this, you can use the responsive controls to further optimize the layout and spacing across devices. The option to change the viewport is present in the Top Bar of the Right Panel.

A small monitor icon beside the label of a setting implies that it can be changed responsively. Just click on the icon, and 4 icons representing viewports will be seen. Click on each viewport icon to edit the value of that setting. Once you click on the viewport, the display on the right panel will also be changed so you can view your changes instantly.

(Video to be added here)

Responsive Breakpoints

  • Mobile < 767px

  • Tablet – 768px – 1024px

  • Laptops – 1025px – 1377px

  • Desktops – > 1378px

Note - The changes made in the responsive settings will only be applied for the particular device. For example, if you are modifying the Padding Value for Laptop device, the change will apply only for Laptop screens and Tablet and Mobile will still hold the default values.

Did this answer your question?