Responsive editing

Swebsy uses the device icons above the canvas to preview the canvas at common viewport widths. Hover an icon to see its name, width and shortcut. Use it while editing so layout changes are checked before you export or deploy.

Swebsy is mobile-first

All sizes and Mobile are aliases for the same base style context. Start by making the page work well there. Then switch upward to Tablet, Desktop and, from the chevron beside the icons, Small tablet, Laptop and Wide screen, to add larger-screen overrides only where needed.

Switch devices from the icons above the canvas to inspect responsive layouts.

Check each device size

1. Find the device icons above the canvas.

2. Start with All sizes or Mobile. They both edit the base mobile styles.

3. Switch upward through Tablet and Desktop. Small tablet, Laptop and Wide screen are in the chevron beside the icons.

4. Scroll through the page and check spacing, text wrapping, and images.

5. Use Preview mode for the final check without editor overlays.

Expected result

The same page remains readable and usable across desktop, tablet, and mobile widths.

One page, checked at desktop, tablet and mobile widths.

Switching between mobile and desktop canvas widths

Responsive style controls

Some design controls are breakpoint-aware. Because Swebsy is mobile-first, changes made in All sizes or Mobile become the base styles. When a larger device is active, changes made in the right sidebar can apply only from that breakpoint upward without changing the smaller mobile layout.

The Design panel shows the active editing context so you can tell whether a change is being made to base styles or to a breakpoint override.

Use this for practical fixes:

• reduce large spacing on mobile
• stack columns that are too narrow
• resize oversized headings
• adjust image fit or alignment
• hide non-essential decorative elements

Export checklist

Before export or deploy:

1. Check desktop, tablet, and mobile.
2. Open Preview mode and scroll the whole page.
3. Test navigation links and buttons.
4. Confirm no text is clipped or hidden behind another element.

Common issues

Mobile layout still looks like desktop — check that the selected component uses responsive layout controls, such as columns or flex settings, instead of a fixed width.

I changed a style on one size but another size didn’t follow — that size has its own value. A small ring beside the field’s name in the Design panel marks it; click the ring to jump there.

Text wraps awkwardly — reduce font size or spacing at the active breakpoint, or make the container wider.

Preview and editor look slightly different — editor outlines and selection handles are removed in Preview mode. Use Preview for the final visual check.