Expand image across two columns

My form is set up with 4 columns. At the bottom of page 1 of my form, I have an image of a shirt. Because of the column layout, the shirt appears out of proportion.

What CSS would I use to allow the shirt image to span the center two (2) columns?

Thanks,

pam

Hi Pam,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Pam,

To have your shirt image span the center two columns of your 4-column layout and display in proper proportion, you can inject the following custom CSS into your form:

1. First, copy the codes below:

#id_194 {

 grid-column: 2 / span 2; /* Spans columns 2 and 3 */

 text-align: center;   /* Centers the image */

}

#id_194 img {

 width: 100%;

 height: auto;      /* Maintains image proportions */

}

3. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

4. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's how it looks after injecting the codes:

If you need more adjustment, just let us know, or you can try to adjust the custom CSS codes I provided.

Give it a try and let us know if you need any more help.