How to display different images on mobile and desktop?

Sometimes you need to show different images for mobile and desktop respondents. This can be achieved through customisations. You will need to do three things:

1. Add new classes in your customisation

In your customisation, you will need to insert this code:

<style>
    @media only screen and (min-width: 1025px) {
        .mobile-only {
            display:none !important;
        }
    } 
    @media only screen and (max-width: 1026px) {
        .desktop-only {
            display:none !important;
        }
    } 
</style>

2. Upload images in your survey

3. Add classes to these images

You need to add the classes desktop-only and mobile-only to your images:

Now, you should test that this has worked in your survey!