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: Choosing the base device When you create a Web App, you pick the base device in the Base Variant field of the create form. It defaults to Desktop. The base device can't be changed after the app is created: it shows as read-only in Edit Details, and the app's Overview lists it as Base Device. Overrides for other devices 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:
A device-type toggle at the top — switch between Desktop, Tablet, and Mobile categories.
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:
Option in the switcher | Resolution |
|---|---|
Laptop (1366 x 709) | 1366 × 709 |
Laptop (1440 x 834) | 1440 × 834 |
Desktop (1680 x 1050) | 1680 × 1050 |
Desktop (1920 x 1080) | 1920 × 1080 |
Desktop (2560 x 1440) | 2560 × 1440 |
Tablet Device Presets
The Tablet category covers Apple and Android tablets. Each comes in two orientations, marked V (vertical) and H (horizontal):
Option in the switcher | Resolution |
|---|---|
iPad mini V (744 x 1133) | 744 × 1133 |
iPad mini H (1133 x 744) | 1133 × 744 |
iPad Pro 11” V (1194 x 834) | 1194 × 834 |
iPad Pro 11” H (834 x 1194) | 834 × 1194 |
iPad Pro 12.9” V (1024 x 1366) | 1024 × 1366 |
iPad Pro 12.9” H (1366 x 1024) | 1366 × 1024 |
Android V (800 x 1280) | 800 × 1280 |
Android H (1280 x 800) | 1280 × 800 |
Mobile Device Presets
The Mobile category includes popular iOS and Android phone models:
Option in the switcher | Resolution | Platform |
|---|---|---|
Iphone 14 & 15 Pro Max (390 x 830) | 390 × 830 | iOS |
Iphone 13 & 14 (390 x 830) | 390 × 830 | iOS |
Iphone 8 (375 x 667) | 375 × 667 | iOS |
Iphone X (375 x 812) | 375 × 812 | iOS |
Google Pixel 6 Pro (376 x 816) | 376 × 816 | Android |
Google Pixel (324 x 576) | 324 × 576 | Android |
Galaxy S8 (360 x 740) | 360 × 740 | Android |
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 (the Base Variant you picked when creating the app). 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:
Confirm the base layout looks correct on Desktop: Ensure your three-column layout is configured on the Desktop device. The builder saves your edits automatically.
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.
Adjust the layout for mobile: Select the three-column Grid and, in the Appearance tab, set Layout to Full (a single column). This change is saved as a mobile override — the desktop layout is unchanged.
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:
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.
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.
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: Showing a component on some devices only To show a component on one device and not another, switch to each device where it shouldn't appear and set its Visibility to Hidden there. Visibility edits are per-device, so the other devices keep the component visible.
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. The restored device may not be your base device, so check the active device in the top bar before you start editing.
The device is remembered in this browser. On another browser or machine, the builder opens on the default device until you switch.
Best Practices for Responsive Layouts
Mobile-first vs. desktop-first
UnifyApps supports both approaches, and you can also choose Tablet as the base device. You pick the base device when you create the app, and it can't be changed later, so decide before you start. The right choice 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: Choose Mobile as the Base Variant when you create the app, and use overrides to add complexity for larger screens. Best for consumer-facing apps, field service tools, or apps primarily used on phones.
Tablet-first: Choose Tablet as the Base Variant when you create the app to build a tablet-first web app.
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.