Instant allows you to make any layout responsive for any device (viewport). This is done by creating style and layout overrides in the builder for each element on different screen sizes, allowing you to set different parameters catered to each screen size.
Overview
Responsive design ensures your pages look great on all devices—desktop, tablet, and mobile. In Instant, you create overrides for specific viewports to customize how elements appear at different screen sizes.
Critical: Always start with your desktop layout first. Due to how browsers render webpages, the desktop version is the leading layout. All other viewports inherit from desktop and then apply their overrides.
Even though most visitors may browse on mobile devices, the technical architecture requires desktop as the foundation.
Getting Started with Responsive Editing
Step 1: Select a Viewport
To start styling elements for a specific device type other than desktop, select the viewport size in the top bar of the builder.
Step 2: Make Your Changes
With a different device screen size selected:
Select the element you wish to style differently
Change the layout, size, style, or other options as needed
A blue highlight appears on the option title to indicate the change
Step 3: Remove All Overrides (Optional)
To remove all overrides for an element, click the back arrow next to the element name at the top of the right sidebar.
Step 4: Remove Individual Overrides (Optional)
To remove a specific override, click on the option name that is highlighted in blue.
Understanding Override Indicators
Instant uses color-coded highlights to help you identify overrides:
Color | Meaning |
Blue | Override made on the current viewport |
Lime | Override inherited from a larger viewport |
Identifying Overridden Elements on Other Viewports
Overrides made on viewports larger than the one you're currently editing are highlighted with a lime color.
Click on the lime-highlighted option name to see where the override is coming from. This helps you understand why an element looks a certain way and which viewport the style originates from.
Viewport Inheritance
Styles flow down from larger viewports to smaller ones:
Viewport | Inherits From |
Desktop | Base styles (no inheritance) |
Tablet | Desktop |
Mobile | Tablet → Desktop |
This means:
Changes on desktop affect all viewports (unless overridden)
Changes on tablet affect tablet and mobile (unless overridden on mobile)
Changes on mobile only affect mobile
Best Practices
Practice | Description |
Start with desktop | Build your complete desktop layout before adjusting other viewports |
Work down in size | After desktop, adjust tablet, then mobile |
Override only what's needed | Don't duplicate settings—only change what needs to be different |
Check all viewports | Preview your design on each viewport before publishing |
Use blue highlights | They help you track what's been customized |
Common Responsive Adjustments
Element | Desktop | Tablet | Mobile |
Font size | Larger | Medium | Smaller |
Padding | Generous | Moderate | Compact |
Column count | Multiple | Fewer | Single |
Image size | Full | Adjusted | Optimized |
Navigation | Horizontal | Horizontal or hamburger | Hamburger |
Quick Reference
Task | Action |
Switch viewport | Click viewport selector in top bar |
Make override | Select element → Change any setting |
Identify override | Look for blue highlight on option |
Remove all overrides | Click back arrow next to element name |
Remove single override | Click on highlighted option name |
Find override source | Click lime-highlighted option |
Override Color Guide
Highlight Color | What It Means | Action |
Blue | Changed on current viewport | Click to remove |
Lime | Inherited from larger viewport | Click to see source |
None | Using default/inherited value | No override present |