Advanced Survey Theme Customizations for Mobile

We designed our standard survey themes to be mobile responsive. This means that you can select the theme you want and feel certain that, regardless of the device, your survey respondents will be able to respond to your survey.

When a survey respondent accesses your survey, SurveyGizmo will detect whether the device is mobile. If the device is mobile SurveyGizmo will change the layout of certain elements so that they are optimized for display on mobile devices. Below are the element-specific details of these changes.

If you wish to turn this optimization off you can do so on the Style tab. Simply click Layout > Mobile Interaction and select the Not Mobile Optimized option.

Our mobile responsive survey themes will work 99% of the time, however, there are a lot of devices out there and even more surveys, so you may still find you've built a survey that doesn't look quite right on a given device. Don't fret; there are ways to fix this with a little CSS!

Use Media Queries for Mobile Customizations

Media queries are the secret to what makes our mobile themes responsive. They're pretty easy to use.

Start by accessing the survey link on a desktop and adjust the size of the browser window down to the point where the given problem is present. Adjust the CSS to fix the troublesome question(s).

1. To apply the fix to your existing CSS, go to the Style tab and scroll to the bottom of the survey preview.
2. Click the link for the HTML/CSS Editor.
3. Paste the CSS code you've come up with in the field on the Custom CSS tab and click Save Changes.

Next, you'll want to set up the CSS so that it applies to small screens only. To do so you will need to use media queries to selectively apply the CSS on small screens only.

In order to apply CSS to small devices only, wrap it in a media query for screen sizes that have a maximum width of 540px or smaller. Start your media query like so:

@media (max-width: 540px){
/*place your CSS code here*/
}

And place the CSS you wish to apply to smaller screen sizes between the opening and closing curly brackets.

Save Your Mobile Customizations in a Custom Theme

Using Custom Themes you can save these customizations to use in later surveys. You can do so from the Style tab of any survey. Go to the Style tab and scroll to the bottom of the survey preview and, with the theme you wish to copy selected, click the option in the lower-right corner to Save as New Theme. Name your new custom theme and click Save.

Once your new custom theme is saved go to Account > Libraries > Survey Themes to find your mobile theme. This custom theme will now be available to select as your theme on the Style tab. For any future surveys simply go to Style > Theme > Custom Themes to access your custom themes.