Mobile / Responsive Design

📱 Mobile Devices / Responsive Design

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 matrix questions 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.

Be careful when you select a target and edit the Elements properties as the Elements 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

💻 Different styles for different devices.

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 Elements properties all devices will have the same font size.

Yu can however also have more granular approach and create one style for each target device.

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 Elements properties.

If you have set the smartphone target any changes to the Elements will now only be shown on smartphones.

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.