Responsive settings let you optimize your website's design and layout based on each device's screen size and resolution.
With these settings in place, your site looks great on any device. In this article, we'll walk you through how to set up responsive design in Studio.Design, along with some helpful tips.
How responsive design works in Studio.Design
In Studio.Design, the desktop screen size is the default for your design. If you don't customize the responsive settings, the same content and layout are automatically applied to tablet and smartphone screen sizes as well.
For the best results, finish your desktop design first, then adjust the layout for tablet, and finally for smartphone — working from the largest screen size down to the smallest.
Following this order makes it easier to keep your overall layout consistent and reduces the chance of mistakes.
Here's the recommended order for responsive setup:
Create the desktop design
Adjust the tablet design
Adjust the mobile design
What you can do with responsive settings in Studio.Design
In our responsive settings, some properties can be changed per breakpoint, while others cannot.
Properties you can change per breakpoint (examples) | Size, color, direction, alignment, show/hide |
Properties you cannot change per breakpoint (examples) | Images, text content, grouping structure |
Tip: If you want to show different images or text for different breakpoints, use the visibility settings on the relevant box. For step-by-step instructions, see How to show different images on desktop and mobile.
How to set up responsive design
Follow these steps to set up responsive design. Start by finishing your default (desktop) design, then adjust each screen size in order. Working from the largest size down to the smallest helps keep your overall layout stable.
In the toolbar at the bottom of the screen, switch the device size to [Tablet].
Select any box and change properties like size, color, direction, and alignment.
In the toolbar at the bottom of the screen, switch the device size to [Mobile].
Select any box and change properties like size, color, direction, and alignment.
Note: To learn how to edit breakpoint values or device options, see How to set up breakpoints.
Highlighting for responsive properties
When a property's value has been overridden for a specific breakpoint, the frame color in the right panel changes:
Applied to tablet and smaller sizes: yellow-green
Applied to mobile and smaller sizes: orange
Tips for responsive design
Keep the following points in mind for a smoother setup.
1. Use size units that adjust to screen width
When setting a box's size, we recommend using units that respond to screen width — like "%" — rather than fixed units like "px."
If you use "px"
The element displays at the same width on every device, which can break the layout or cause overflow on smaller screens.
When a visitor resizes their browser window, the design won't adjust smoothly.
If you use relative units like "%"
The size adjusts automatically to the parent box or screen width, giving you a layout that looks good across various devices.
Besides "%," you can also use [vw], [em], and other units depending on your needs.
Tip: For more details, see our help article on size units.
2. Change the box direction based on the device
Different devices call for different layouts. On wide desktop screens, placing multiple boxes side by side makes it easy for visitors to scan information at a glance. On smartphones, where screen width is limited, stacking those same boxes vertically creates a cleaner, easier-to-read display.
You can set the box arrangement per breakpoint by choosing [Direction]: [Down], [Right], [Wrap], [Left], or [Up].
Example: How to display multiple boxes horizontally on desktop and vertically on mobile
Select the parent box one level above the boxes you want to arrange.
With the screen width set to [Default], set the [Direction] arrow to [→].
With the same box still selected, switch the breakpoint to [Mobile].
Set the [Direction] arrow to [Down].
For detailed steps, see How to arrange boxes horizontally or vertically.
3. Show or hide elements based on the device
Showing only the elements that are needed on each device creates a more user-friendly design. For example, you can show a navigation menu on desktop and only a hamburger menu on mobile.
You can toggle visibility per breakpoint using the eye icon on the right side of the Layers panel. For detailed steps, see Setting box visibility per screen width or breakpoint.
Auto Responsive
AI automatically applies responsive settings to your existing design. Tasks that used to be done manually — like adjusting layouts for each device, balancing elements, and optimizing spacing — are handled automatically, helping you save time.
Once your default (desktop) design is finished, follow these steps:
In the toolbar, select the breakpoint you want to apply responsive design to.
Open the Layers panel and select the box you want to make responsive.
* If you want to apply Auto Responsive to the entire page instead of a specific box, open the Layers panel and select "<div> Base" at the very top.Click the magic button
(the star icon) on the left edge of the toolbar. The magic button only appears when an element like a box is selected.
Previewing your responsive design
You can check your settings in the editor or with Live Preview. Be sure to review your design before publishing to catch any layout issues or mistakes.
Checking in the editor
Switch between devices using the toolbar at the bottom of the editor.
Drag the edge of the screen in the editor to resize it and see how the design adjusts.
Checking with Live Preview
Use the Live Preview feature to view your site in a browser.
Open Live Preview in a desktop browser and resize the window to check the design.
Open the Live Preview URL on a tablet or smartphone to see how it actually looks on those devices.
Note: About responsive display in Live Preview
In Live Preview, the display changes based on the screen width of the device you're actually viewing on. The breakpoint selected in the toolbar doesn't affect how the preview is shown.
For example, even if [Default] is selected in the toolbar in the design editor, viewing the Live Preview on a mobile device will show the mobile design.
Resetting responsive settings
You can reset styles individually for each breakpoint.
Switch breakpoints in the toolbar.
Click the [Reset override] arrow next to any property where responsive settings have been applied.
Related articles
iPad tablet laptop