How to make the Image header full size?

  • cigarsurveys
    Asked on April 15, 2024 at 12:42 AM

    Hi,

    I would like to make 2 changes to my header image.

    1. In the form, remove the image padding size.How to make the Image header full size?  Image 1 Screenshot 30
    2. In the review answers, adjust the image to fill the whole box. See the image below.
      How to make the Image header full size?  Image 2 Screenshot 41




  • Vincenzo JotForm Support
    Replied on April 15, 2024 at 6:18 AM

    Hi Dan,

    Thanks for reaching out to Jotform Support. I’m sorry that you’re having trouble with this. Unfortunately, it is not possible to make your Image element full width, because it is inside a Div that has a fixed width. As a workaround, you can create an image that contains the logo and the header image and then upload it in the logo. Doing that is easy, let me show you how:

    1. In Form Builder, right-click on the Image element, then click on the Trash icon on its right to delete it.
    2. Now, click on your Logo, then in the panel on the right, click on Remove logo.
    3. Upload the new logo. You can download the logo merged with your header image from here.
    4. Finally, set the Logo size to the maximum.

    How to make the Image header full size?  Image 1 Screenshot 30

    That's it. By doing so, you can show the Header full size, and it will look full size also on the Review page.

    Result:

    How to make the Image header full size?  Image 2 Screenshot 41

    Give it a try and reach out again if you have any other questions.

  • cigarsurveys
    Replied on April 15, 2024 at 9:14 AM

    Hi Vincenzo,

    Unfortunately, that is not the workaround I'm looking for. Is it possible to delete the image if the size cannot be adjusted on the review page?

  • Vincenzo JotForm Support
    Replied on April 15, 2024 at 9:50 AM

    Hi Dan,

    Thanks for getting back to us. I am sorry that the workaround did not help you. Making the Header image full size (but with the div margins in both sides) is possible by injecting a CSS code. Let me show you how:

    1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
    2. Next, click on the Style tab.
    3. Scroll down to Inject Custom CSS and paste the code provided below:
    /* Make the Header image full size on the Review Answer page - 13881671 */
    #previewContainer li>div img {
      max-width: 1000px !important;
      max-height: 100% !important;
    }
    /* Code Ends Here  */

    How to make the Image header full size?  Image 1 Screenshot 40

    Result:

    How to make the Image header full size?  Image 2 Screenshot 51

    Otherwise, if you want to delete the image it is easy, let me walk you through it:

    • In Form Builder, right-click on your Header image.
    • Next, click on the Trash icon on its right to delete it.

    How to make the Image header full size?  Image 3 Screenshot 62

    Reach out again if you have any other questions.