Skip to main content
All CollectionsEditorResponsive
Turn your website responsive
Turn your website responsive
Kelvin H. avatar
Written by Kelvin H.
Updated over a week ago

How does responsive design work in STUDIO?

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.

Configuring the layout for tablet and mobile screen sizes

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.

Custom breakpoints

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.

Did this answer your question?