How to make images responsive in Surveys

  • Home
  • Ask
  • How to make images responsive in Surveys
Back

1. Enter the ‘Surveys’ tab and create your questions and/or lead collector. After saving your questions you can focus on the design of the survey.

In order to upload an image into your survey you have to go to the ‘Texts‘ step and choose where you desire to upload the image:

  • into the header ( which will be available for all the questions  and for the lead collector also )
  • into the intro message that appears when the survey is opened
  • or into the thank you message that appears when the survey is ended.
ask survey upload image

2. Click on the specific icon that is used for uploading pictures.

ask survey icon upload images

3. Select the ‘Upload’ tab and choose the image that you want to integrate into the survey.

ask survey upload tab

4. After uploading the picture click on ‘Source‘ in order to have access to the source code of the Header, Intro Message or Thank you message of the survey.

ask survey image source code

5. Erase the part of the code that describes the size of the image, ‘width’ and ‘height’, used in the <style> attribute.

ask survey erase predefined code

6. The technique used for making the image responsive is based on media queries.

The following block of code has to be inserted, at the beginning, into the source code of the survey and will allow the image to scale properly on mobile devices:

<style type=”text/css”>
@media screen and (max-width: 480px) {
html body #_mktz_survey #_mktz_header img {
  width: 100%;
  display: block;
  margin: auto;
  }
}
</style>
ask survey responsive image code

7. After completing all these steps you can select preview in order to check how your survey will appear on different devices

ask preview survey

8. Into the Preview mode, you can access the ‘Inspect element’ menu of your Chrome browser in order to see how the survey will appear on certain mobile devices. To do that press F12 or right-click anywhere and Inspect element. See the picture below where is the mobile device view button.

ask survey image inspect mode

Useful tip:

Sometimes the image that you desire to include into your survey won’t fit perfectly in the container of the survey. In this case, the survey will have a similar appearance to the one below (Case 1).

In this situation, the container of the survey needs to be adjusted in order for the picture to fit properly (Case 2).

ask survey image adjust

In order to be able to make this adjustment select the ‘Design‘ tab into the survey and go to ‘Advanced CSS‘.  Then use this list of selectors corresponding to the survey to modify the width of the container.

The selected width will depend on the width of the picture (in the given example the picture has a width of 400px).

The ‘max-width’ attribute will be used so that we can keep the survey container responsive.

ask survey refresh preview
Shopping Basket