Responsive Design
Last updated
Last updated
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:
The in the 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).
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.
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.
Many built-in elements allow changing certain design settings via the in the screen. Some examples of such elements include , , and others.
These settings are organized similar to the described above allowing a Main, Desktop, Tablet and Mobile version for that setting.
The in the 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 .
