Say a new hero banner looks exactly right on desktop — the headline sits neatly over the image, the button is well placed — and cramped on a phone, where the same text and image are fighting for the same narrow space. The instinct might be to think this needs a separate mobile version of the page. It doesn’t; it needs the same page, adjusted per device.
Every page is responsive from the start
Pages are responsive by default, and you can preview desktop, tablet, and mobile directly inside the editor to actually see the cramped version instead of guessing at it.
Adjust just the sizes that need it
From the tablet or mobile preview, you can edit styles specifically for that device — a smaller heading size, more breathing room around the button, whatever the desktop version doesn’t need but the phone version does. A clear indicator shows, style by style, whether a value is set specifically for the device you’re viewing or simply inherited from desktop, with the option to reset it back to inherited if your adjustment didn’t help. Magicfront AI also flags plainly when you’re editing the tablet or mobile view, so it’s never ambiguous which version you’re currently changing.
Hide what doesn’t belong on a smaller screen
Some elements are better left off a phone entirely rather than shrunk to fit — a secondary banner, a wide comparison table — and you can choose to show or hide specific elements depending on the screen, instead of forcing everything on desktop to also appear, awkwardly, on mobile.
The takeaway
A page that looks right on desktop and wrong on mobile isn’t two pages waiting to be built — it’s the same page with a handful of device-specific adjustments, previewed and fixed on the exact screen size where it was breaking.