Instant allows you to make any layout responsive for any device (viewport). this is done by creating style & layout overrides in the builder for each element on different screen sizes. This allows you to set different parameters for each element catered to the screen size you are designing for.
It is very important to start with your desktop layout first, due to the nature of how browsers render webpages and the technical side behind it mandates that the desktop version is leading, even though most visitors tend to visit your store on a mobile device.
Getting started with responsive editing
To start styling your elements for a specific device type other than desktop. Select the viewport size in the top bar of the builder.
With a different device screen size selected, select the element you wish to style differently on the selected viewport. Proceed by changing for example the layout, size and style options. For each setting you change on the selected viewport, a blue highlight for the option title will appear to highlight the change.
All overrides for an element can be removed by clicking on the back arrow next to the element name at the top of the right sidebar.
Or individually by clicking on the option name that is highlighted.
Identifying overridden elements on other viewports
Overrides made on other viewports than desktop, but larger than the device you are currently editing are highlighted with a lime color. Clicking on the option name shows where the override is coming from.
