How Responsive Design Works in UnifyApps

UnifyApps uses a device override model for responsive design. Your app is created with a base device — the primary device class the app is optimized for. All design work done on this base device forms the app's default layout.

When you switch to a different device in the builder and make changes, those changes are saved as overrides specific to that device. Overrides never affect the base device's layout. This means you can build a full desktop experience first, then switch to mobile and adjust only the things that need to be different — without risking your desktop layout.

Note: Web App base variant When you create a Web App, the platform assigns a base variant optimized for the primary device class you choose during setup. The base variant defines the starting point for all other device views. Overrides stack on top of the base without modifying it.

The Device Switcher

The device switcher is in the top bar of the page builder. Click the device icon to open a popover containing:

1. A device-type toggle at the top — switch between Desktop, Tablet, and Mobile categories.

2. A resolution variants list below — specific device models and screen sizes for the selected category.

Selecting a device in the popover immediately updates the canvas to simulate that device's dimensions. The canvas renders your page at the selected width and shows any device-specific overrides that have been saved for it.

Warning: Always check which device is active Edits on the canvas always apply to the currently selected device. Before making changes, confirm that the correct device is active in the top bar — the device icon updates to reflect the currently selected device type. Editing while on the wrong device will save the changes as overrides for that device instead of the intended one.

Desktop Device Presets

The Desktop category includes common laptop and monitor resolutions:

Tablet Device Presets

The Tablet category covers both Apple and Android tablet form factors in portrait and landscape orientations:

Mobile Device Presets

The Mobile category includes popular iOS and Android phone models:

Base Device vs. Device Overrides

Understanding the relationship between the base device and overrides is essential for predictable responsive behavior.

The base device

The base device is the device class your app was created with. All initial design work — component placement, sizes, spacing, typography, colors — is stored as the base layout. The base layout serves as the fallback for any device that does not have an explicit override.

Device overrides

When you switch to a non-base device in the builder and make changes, those changes are stored as device overrides. Overrides are applied on top of the base layout only when the app is rendered at that device's breakpoint. They do not touch the base layout.

📝 Example: Desktop base, mobile override

Suppose your app's base device is Desktop and you have a three-column layout on the homepage. To make it single-column on mobile:

1. Confirm the base layout looks correct on Desktop: Ensure your three-column layout is configured on the Desktop device. Save any pending changes.

2. Switch to a mobile device: Use the device switcher to select a mobile device (e.g., iPhone 14). The canvas resizes to the mobile viewport. You will see the desktop layout reflow to the smaller width — review what it looks like before making changes.

3. Adjust the layout for mobile: Select the three-column container and change its layout to a single column in the Appearance tab. This change is saved as a mobile override — the desktop layout is unchanged.

4. Verify on both devices: Switch back to Desktop in the device switcher. Confirm the three-column layout is intact. Switch to Mobile again to confirm the single-column override is still applied.

Visibility Per Device

In addition to per-device layout overrides, you can control a component's visibility on a per-device basis. This is useful when an entire component or section should only appear on certain device types — for example, a mobile-only navigation bar or a desktop-only sidebar.

How to set device-specific visibility

Visibility is configured in the Appearance tab of the properties panel, in the Visibility section. The three options — Visible, Hidden, and Conditions — can each be set independently per device:

1. Select the component you want to hide on a specific device: Click the component on the canvas to select it and open the properties panel.

2. Switch to the target device: Use the device switcher to switch to the device on which you want to hide the component — for example, Mobile.

3. Set Visibility to Hidden in the Appearance tab: In the Appearance tab, find the Visibility section and set it to Hidden. This change saves as a mobile override — the component remains visible on Desktop.

Hidden component indicator in the Hierarchy

Components hidden via the Visibility setting show an eye-off icon next to their name in the Hierarchy panel. This icon appears when the selected device has a "Hidden" override for that component, making it easy to identify hidden components without switching to the canvas view.

Tip: Using Conditions for responsive visibility Instead of maintaining separate device overrides, you can use a Conditions expression to show/hide a component based on the current device at runtime. For example: {{ app.device === 'desktop' }} shows the component only on desktop. This approach uses a single configuration rather than separate overrides per device.

Platform Remembers Your Last Device

The platform remembers the last device you viewed per application. When you return to the builder for an app, the device switcher automatically restores the device you were using in the previous session. This prevents accidentally designing on the wrong device after returning to work.

If you open the same app in a new browser session or on a different machine, the device will default to the app's base device until you switch.

Best Practices for Responsive Layouts

Mobile-first vs. desktop-first

UnifyApps supports both approaches. The choice of which device to use as the base depends on your app's primary audience:

• Desktop-first: Start with a full-featured desktop layout and use overrides to simplify for smaller screens. Best for internal tools, dashboards, and admin panels primarily used at desks.

• Mobile-first: Set the base device to Mobile and use overrides to add complexity for larger screens. Best for consumer-facing apps, field service tools, or apps primarily used on phones.

Use layout containers strategically

Flex and Grid container components respond naturally to viewport changes. Rather than setting fixed pixel widths on every component, rely on container-based layouts that reflow automatically as the canvas width changes. Reserve device-specific overrides for cases where automatic reflow is insufficient.

Test on multiple devices before publishing

Before publishing, use the device switcher to review your app on at least one device from each category (Desktop, Tablet, Mobile). Pay particular attention to:

• Components that overflow their containers horizontally on smaller screens.

• Navigation elements that may be difficult to tap on touch devices.

• Text that becomes too small or too large at different resolutions.

• Images and media that do not scale correctly.

Warning: Canvas preview vs. real device The device switcher simulates screen dimensions but does not replicate true mobile rendering behavior such as font scaling, touch event handling, or browser chrome. Always test your published app on real devices or in a mobile browser before launch for critical use cases.