STUDIO allows you to create a responsive website by designing the layout for desktop screen size as the default and adding style instructions for scaling down to tablet and mobile screen sizes.

Most of the style information can be configured to behave responsively, but the wording of text, images, and grouping structure cannot be changed.

To set up style changes for Tablet and Mobile, edit the element under their respective views (known as “breakpoints”). To travel between Desktop (”Primary”),Tablet or Mobile breakpoints , select from the responsive bar or drag the left and right handles on the canvas.

You can specify styles for each breakpoint. The specified styles will be highlighted in the UI: green for tablets and orange for mobile devices. To reset the responsive settings for a specific breakpoint, click the "×" icon at the top right corner of the UI.

In addition to tablet and mobile breakpoints, you can customize your own breakpoint to display a particular style for a specific screen size. To do so, you can either enter the width in pixels or simply drag the handles on the canvas.

Note that the breakpoints setting will be common throughout the project and cannot be changed for each page.

Learn more here: Custom breakpoints | STUDIO U

​