Responsive
Make your site look great on every device with breakpoints, the width slider, and responsive images.
Responsive design demystified
Understand what responsive design means, why it matters, and how Site Designer's tools make it visual and approachable.
The width slider (Responsifier)
Drag the width slider to preview your design at any viewport width and find layout problems before they reach users.
Custom breakpoints
Add, edit, and remove breakpoints to control exactly when your responsive styles apply.
Breakpoint mode
Activate breakpoint mode to make responsive style edits that only apply at or below a specific viewport width.
Mobile-first vs. desktop-down
Two strategies for building responsive layouts — and how to choose the right one for your project.
Picture element and responsive images
Serve different image sizes and formats at different breakpoints using the HTML picture element.
Hide and show elements at breakpoints
Make elements visible only on certain screen sizes using breakpoint-mode visibility controls.
Making a static layout responsive: step-by-step
A five-step walkthrough for converting a fixed-width, single-column desktop design into a fully responsive layout.
