In Preview you can test responsive layouts: pick a device preset or type a custom width×height, and rotate to swap width and height.
Where: Preview toolbar → device/size controls — Enter Preview mode
Key ideas
- Presets & custom: Choose a device preset or enter a custom width and height.
- Rotate: Swap W/H to test portrait vs landscape.
Steps
- Enter Preview mode.
- Pick a device preset or set a custom size.
- Rotate to flip orientation.
Preset and custom viewport testing
- Preview device presets and custom width × height let you test the same page at a chosen viewport size.
- Rotate swaps width and height to compare portrait and landscape without changing the page content.
- This tests the preview viewport; it does not create or rename a responsive breakpoint in the project.
What to inspect
- Check content wrapping, image crop, navigation, touch targets, and overflow at each important size.
- Use a custom size around the point where a layout begins to feel crowded, not only standard device presets.
- Return to the editor breakpoint controls to make responsive changes; Preview is for testing, not for adding design breakpoints.
Tips
- Test both sides of a breakpoint threshold so you catch abrupt changes as well as the preset sizes.