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.

I hit a wrong key and deleted all my CSS code.

Is there a way to recover it?
Pam

Hi Pam,

Could you try using the Revision History feature? It lets you revert your form to a previous version and restore the content or settings that were removed by mistake. Let me show you how to use it:

1. In Form Builder, click on the Circular Arrow icon at the top middle of the page to open the Revision History menu.
2. In the menu on the right side of the page, select the version you want to restore the form to. 
3. Now, just click on Revert next to the version you select, and then close the Revision History menu in the top right corner.

After that, you can follow the steps shared by my colleague Aries here that aim to make your shirt image span the center two columns of your 4-column layout and display with the correct proportions.

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

Thanks, worked like a dream!

I still need to get the text to align next to the image. For some reason the image is preventing this.

Pam

Hi Pam,

You can use the CSS code below to adjust the size of the image and align the text to it.

#id_194 img {

  width: 60%;

  height: auto;

}

li#id_192 {

  margin-bottom: -185px;

}

See the screenshot below for the results:

Give it a try and let us know how it goes.