Responsive editing

Swebsy uses the device selector in the topbar to preview the canvas at common viewport widths. Use it while editing so layout changes are checked before you export or deploy.

Swebsy is mobile-first

Free form and Mobile are aliases for the same base style context. Start by making the page work well there. Then switch upward to Tablet, Laptop, Desktop, and Wide Screen to add larger-screen overrides only where needed.

Switch devices from the topbar to inspect responsive layouts.

Check each device size

1. Open the device selector in the topbar.

2. Start with Free form or Mobile. They both edit the base mobile styles.

3. Switch upward through Tablet, Laptop, Desktop, and Wide Screen.

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.

Switching between mobile and desktop canvas widths

Responsive style controls

Some design controls are breakpoint-aware. Because Swebsy is mobile-first, changes made in Free form 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.

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.