Responsive Design

Responsive design is an approach that makes your Zingy app adapt and respond to different devices and screen sizes. The goal is to provide an optimal user experience regardless of whether the user is accessing the Zingy app on a desktop computer, laptop, tablet, or smartphone.

The page editor allows you design your pages responsively in the following ways:

Page Element Settings: Design Tab

The Design Tab in the Page Elements Settings screen contains 4 sub-tabs:

• Main design settings for the element

  Use the settings in the main sub-tab for changing the overall look of the element across all screen sizes i.e. these design settings become the default for this element, unless the same setting is modified in the Desktop/Tablet/Mobile sub-tabs. If you only want a design setting to be effective for a specific screen size then leave that setting unchanged in the Main tab.

• : Desktop/Laptop view design settings for the element

  Use the settings in the desktop sub-tab for changing the look of the element when viewed on a larger screen like a desktop or laptop computer. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present).

• : iPad/Tablet view design settings for the element

  Use the settings in the tablet sub-tab for changing the look of the element when viewed on an iPad or other tablet like devices. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present).

• Mobile phone view design settings for the element

  Use the settings in the mobile sub-tab for changing the look of the element when viewed on a mobile phone or similar smaller screen device. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present).

The setting from the main sub-tab (if present) will be inherited unless overridden.

NOTE: Unlike the options tab described below, the smaller screen size setting does not get inherited by the larger screen sizes.

Each screen size needs to be set separately or it inherits the main sub-tab setting.

---

Page Element Settings: Options Tab

Many built-in elements allow changing certain design settings via the Options Tab in the Page Elements Settings screen. Some examples of such elements include Flexible Area, Layout Row, and others.

These settings are organized similar to the design tab of the page element settings described above allowing a Main, Desktop, Tablet and Mobile version for that setting.

The main version of the setting (if present) will be inherited for all screen sizes unless overridden.

NOTE: If not overridden for a specific screen size, a smaller screen size setting (if present) will be inherited. e.g. If you choose a specific value for Mobile, then this value will apply to Tablet and Desktop.

This behavior is different from the design tab described above.

---

Page Content Toolbar

The page content toolbar in the page editor offers buttons to switch between desktop, tablet and mobile views while designing your page.

For information about creating visually appealing and well-structured layouts also read Padding and Margin .