Most visitors will see your site on a phone. Remake uses one design for every screen and lets you adjust it for smaller devices.
Last updated
The device menu sits in the toolbar. It has four choices:
Desktop is the default. Its styles apply to every screen unless a smaller device overrides them.
Tablet applies below 1024 pixels wide.
Mobile landscape applies below 768 pixels wide.
Mobile portrait applies below 640 pixels wide.
The menu is ordered from the largest screen to the smallest, and styles apply from top to bottom. A style set on Desktop applies to every screen. A style set on Tablet applies to tablet and both mobile sizes. A style set on Mobile landscape applies to both mobile sizes. A style set on Mobile portrait applies only to the smallest phones.
A smaller device can override a larger one, but a larger device cannot override a smaller one.
This is the opposite of the mobile-first approach you may have seen elsewhere. It matches how you build in Remake: start with the full design, then adjust it for smaller screens.
For example, a heading can be 48 pixels on Desktop, 36 pixels on Tablet, and 28 pixels on Mobile portrait. Each size inherits the one above until you change it.
Start with the desktop design. Then switch to a smaller device and change only what needs to change.
Rows stack their columns on small screens, so a two-column layout becomes one column on a phone. Columns also stop forcing their width and let the content fit.
This means you do not have to rebuild every layout for mobile. You mostly need to check spacing, font sizes, and images.
Switch to Mobile portrait and try these:
Reduce large headings.
Reduce section padding.
Make buttons full width when they are hard to tap.
Replace a decorative image with one that fits the smaller space.
If you remove something to make room, make sure the page still makes sense without it.
A heading that looks dramatic on a desktop can overwhelm a phone. Select the heading, switch to Mobile portrait, and set a smaller size.
Do the same for long paragraphs if the text feels tight. Body text should stay readable without zooming.
Desktop padding is often too generous on a phone. Switch to Mobile portrait and reduce the padding on sections and cards.
Keep enough space around buttons and links. A cramped tap target is frustrating.
Images scale down with their container. Check that the important part of the photo is still visible after the crop.
If a wide banner loses its subject on mobile, use a different image for the mobile layout or place the subject closer to the center.
The state menu next to the device menu lets you style the hover state. Hover does not exist on touch screens, so never put essential information only in a hover state.
Use hover for a small color change or a lifted shadow. Do not use it to reveal a menu that cannot be opened by tapping.
The same state menu can style a link when it points at the page the visitor is on. Select Current page in the state menu, then apply the style: for example current:underline or current:text-brand-600.
The match is exact and ignores the query string. /blog is current on /blog and /blog?page=2, but not on /blog/post. Links to other sites, mailto: and tel: links never match, so a menu item that points elsewhere is never highlighted by accident.
The published page marks the link with the standard aria-current="page" attribute, so this works without JavaScript, including on exported static pages. The editor canvas shows the same state while you design the page.
The editor canvas is not a phone. Resize the browser window to see the layout get narrow, then open the published site on a real phone.
Check:
The menu opens and closes.
Forms are easy to fill in.
Buttons are large enough to tap.
Text does not overflow or get cut off.
Images still show the right subject.
Build the page on Desktop.
Switch to Tablet and fix obvious crowding.
Switch to Mobile portrait and reduce heading sizes and padding.
Adjust the gap or spacing in any row that still feels tight.
Resize the browser window to check the narrow layout.
Publish and check the live page on a real phone.
Read The Box tab for the spacing controls, and Text and fonts for type sizes.
If you write custom classes, use the same max-lg:, max-md:, and max-sm: prefixes. Read Custom classes (advanced) for the syntax.
A website builder that works like a document. CMS, forms and EU hosting included.
© 2026 Remake. All rights reserved.
