The Editor
Responsive design
Make your site look right on phones, tablets, and desktops by checking and adjusting each screen size with the device selector.
Last updated 2026-06-29
Your visitors arrive on phones, tablets, and laptops. A responsive site rearranges itself to look good on each. Webpress handles most of this for you, and gives you a device selector to check and fine-tune the rest.
What "responsive" means
The same page can be shown at very different widths. Text that fits in three columns on a laptop needs to stack into one column on a phone. Responsive design is the practice of making sure your layout adapts instead of breaking (tiny text, sideways scrolling, overlapping elements).
Most blocks and templates in Webpress are already responsive out of the box. Your job is mainly to check each size and tidy up anything that doesn't look right.
Switch devices
At the top-right of the canvas, the device selector lets you preview your page at three sizes:
| Device | Approx. width | Stands in for |
|---|---|---|
| Desktop | full width | Laptops and monitors |
| Tablet | ~768px | Tablets and small laptops |
| Mobile | ~390px | Phones |
Click a device and the canvas resizes to match. Always give Mobile a look before publishing — it's where most visitors will see your site.
How per-device styling works
This is the key idea: start on Desktop, then adjust smaller sizes.
- Styles you set on Desktop are your base — they apply everywhere unless you override them.
- Switch to Tablet or Mobile and change a style there, and that change applies only to that size and smaller. Behind the scenes Webpress writes a "media query" so the override kicks in at the right width.
For example: a heading might be a large 56px on Desktop. Switch to Mobile, set it to 32px, and your published site shows 56px on big screens and 32px on phones — automatically.
Because smaller-device edits are overrides, the cleanest workflow is: design on Desktop first, then walk down through Tablet and Mobile fixing only what needs to change (usually font sizes, spacing, and column counts).
Common mobile fixes
- Shrink large headings so they don't run off the screen.
- Reduce padding on big sections to reclaim space.
- Stack columns — many row/grid blocks stack automatically on mobile; if not, see Layout: flexbox & grid.
- Hide or show an element on specific devices with its Visibility property — see Component properties & traits.
Where to go next
- Styling overview — where the per-device controls live.
- Typography and Spacing — the two things you'll adjust most per device.