Phones and Tablets
Make your site look right on every screen size.
By the end of this page, you will know how each screen size inherits from Desktop and how to change one without touching the others.
The four sizes
Use the screen-size buttons in the toolbar to switch the view.
| Size | Screen width |
|---|---|
| Desktop | 1200 pixels and wider |
| Small Desktop | 992 to 1199 |
| Tablet | 768 to 991 |
| Phone | under 768 |
Visitors automatically see the right one for their screen. These four sizes are fixed. You can't add your own.
Desktop is the starting point
Design your site on Desktop first. Everything else follows from it until you change it.
Changes you make while Tablet or Phone is selected apply only to that size and the narrower ones below it. They never change Desktop.
Two things work differently
Looks follow Desktop, step by step
Colors, spacing, fonts, borders, and other style settings flow down from the widest size to the narrower ones. If you set a style on Desktop, Small Desktop, Tablet, and Phone all get it. If you then change it on Tablet, Tablet and Phone get the new value and Desktop keeps its own.
The Properties tab always shows the value that is in effect at the size you are viewing. Next to a setting it may say Set here (you changed it at this size) or Inherited (it comes from a wider size).
Layout is set per size
Where a block sits and how big it is does not flow down the same way.
- Small Desktop uses the same layout as Desktop until you move something.
- Tablet and Phone start with every block stacked full width, in one column, in the same order they appear in the section. Each block keeps its height.
The moment you drag or resize a block at Tablet or Phone, that block gets its own layout for that size. Blocks you haven't touched stay stacked.
Rearrange for phones
- Click Phone in the toolbar.
- Drag and resize blocks as you like.
- Check Tablet too. Small screens won't copy your Phone layout unless you set it there as well.
If you drag several blocks at once (drag a box around them), they all keep their layout together at that size.
Add new blocks
A new block is always added to the Desktop layout, even if Phone is selected when you drop it. It then joins the stacked order on Tablet and Phone.
Things that don't change by size
- Stick doesn't carry over to Tablet and Phone. Turn it on there if you want it. See Animations and Stick.
- Animations use one setting everywhere.
- A section's height is set once for the section.
Check your work
Click Preview and use the same screen-size buttons. Preview shows your site the way visitors see it at each width. For a real check, also open your published site on an actual phone.
Good to know
- Switching sizes doesn't change your selection, your undo history, or what's saved.
- Your menu turns into a hamburger button on Tablet and Phone. See Navigation and Footer.
- If a change on one size didn't do what you expected, check which size is selected in the toolbar. This is the most common cause.