Learn about our newest features and enhancements!
How to Make an Image Responsive on a Form
Jessica Mocha 12/10/2021 3:46:00 PM

When inserting images to a form, you have to be aware that the image may not look the same on different screens. For example, the image would look different on a desktop computer than on a smart phone. To ensure that your image fits the screen and resizes based of the size of the screen, you need to make your image responsive

Below we can see the responsive image and a non-responsive image. The image on the left fits the screen perfectly, while the image on the right runs off the screen due to the size of the screen.

 

Insert your image into the Top Content Block on the Content Tab using the image tool.

Once the image has been added, Click on the source code icon, <> , to view the source code for the content block

Locate the line of code that looks like the below.

<div><img src= "https://nameofyourimage.jpg" alt="" /></div>


Update the line of code where it says img src=”  change to  img class="img-fluid" src=

By changing the line of code, you are upgrading the code to not only find the location of the image to present but telling it to make the image “Fluid” based on the screen size.

 

So, the code will now look like:

<div><img class="img-fluid" src="https://nameofyourimage.jpg" alt="" /></div>


 

 

 

 



Related Articles

Powered by Powered By CharityEngine