Show an image depending on screensize

It can be useful to show an image / instruction to recommend your respondents to put their device from portrait to landscape mode.

Upload the image to your file manager.

And use the URL of the image in the HTML img tag.

First create add an HTML element with the code that shows or hide the image.

In this case - if a screen is smaller than 500px we show (display:block)  the class .mobiledevice (which is a div with the image in there).

Otherwise we hide this (display:none)

You can add this CSS style also in your template (then you don't have to add it in each question where you want to use this).

Add an extra HTML element where we add in the image.

Add in here the link from the image.

You can also add some text in the div tag.

And in this example the image is always 100% width with a maximum width of 200px.

Result:

Large screens (no image displayed):

Small screens (less than 500px - image is displayed):