Mobile / Responsive Design
Last updated
Was this helpful?
Last updated
Was this helpful?
All surveys and forms styles comes out of the box with support for mobile, tablet or desktop clients. The style will automatically be adapted to target device, some questions like the will even adapt their rendering to match mobile devices constraints.
The style editor let you preview at any time how your survey will look on the target device of your choice.
Yu can however also have more granular approach and create one style for each target device.
Styles properties are set at runtime in the survey based on the respondent device browser width. If the user runs for example on a laptop with a screen 960px resolution ngSurvey will first try to look up the style properties of set for the laptop target device, if it can't find any property there it will fall back down to the tablet and so on. If ngSurvey can't find any target device specific properties it will fall back to the All device properties.
Specific target devices styles take precedence over the global All devices target style and will override any similar property.
Be careful when you select a target and edit the properties as the properties are saved, as described below, on a per target basis. If you want that your changes targets all devices make sure to switch back to the All devices before making changes to the elements
The default mode when editing a style is that the style targets all devices, as such if you change for example the answers font sizes in the properties all devices will have the same font size.
If you would like to set different style properties based on the target device you may select the target device for which you want to edit the properties and edit the properties.
If you have set the smartphone target any changes to the will now only be shown on smartphones.
