I would like for the form to display different images when loaded on mobile. Is this possible?

That is correct, I would like for the form to display different images when loaded on mobile. Is this possible?

Please follow the guide below to set it up:

1. First you will need to identify the ID of the image that you want to replace for mobile. You can do so by using the Inspect Element feature of your browser. If you are using Chrome, hit CTRL+SHIFT+I on your keyboard to open the inspect element.

 

2. Now once it is opened, click on the arrow icon on the top left. Then select the image that you want to modify. You will see the ID of the field above the 

 

3. Now that you have the ID, you can now add the alternate image using custom css. In the example above, the ID of the field is #_d2, so we will use that in our code below:

#_d2{

 background: url(http://i1048.photobucket.com/image.jpg) !important;

}

The yellow highlighted text will be the link to your alternate image. The green is the id of the field.

 

4. Now to make sure that this css is only applied on mobile, we will insert the code above inside the @media query. You can see the example below:

@media screen and (max-width: 480px){

#_d2{

 background: url(http://i1048.photobucket.com/image.jpg) !important;

}

}                                            

The blue highlighted text is the @media query, and the css for the image is inserted inside this query.

 

5. Follow the steps 2 to 4 for the rest of the images that you want to replace in mobile, and your code should look like the one below, if not more.

@media screen and (max-width: 480px){

#_d0{

 background: url(http://i1048.photobucket.com/image.jpg)!important;

}

#_d1{

 background: url(http://i1048.photobucket.com/image.jpg)!important;

}

#_d2{

 background: url(http://i1048.photobucket.com/image.jpg)!important;

}

#_d3{

 background: url(http://i1048.photobucket.com/image.jpg)!important;

}

}                                         

 

6. Now that you have the final code, we will need to inject this code into the custom css tab of your widget.

Once you have updated the wizard, the image should now change when you view the form on mobile.
Regards.

Chriistian Thank you so much for the detailed explanation! 

I will let you know how it goes once I get it completed! 

 

Thanks!