Tip: Responsive design in Studio.Design
In Studio.Design, you start with one base page design and adjust styles for each screen width (breakpoint) to create a responsive design.
You can change the layout, appearance, and position of boxes and text at each breakpoint, but the actual content of images and text, as well as the grouping structure, stays the same across all breakpoints.
For more about responsive design concepts and related features, check out these articles:
After creating your default design at the PC size, adjust the width of the Base box to preview how your design will look on different devices. You can change the screen width in two ways.
Option 1: Drag the edge of the screen
Open the page you want to edit in the design editor.
Move your cursor to the right or left edge of the screen.
When the cursor changes to a drag handle, drag left or right to adjust the screen width.
Option 2: Switch screen sizes using the responsive bar
In the toolbar at the bottom of the design editor, click the breakpoint that matches the screen size you want to preview (such as Default, Small, Tablet, Mobile, or Mini).
The screen width changes to match the size you selected.
responsive SP mobile tablet small