-
cigarsurveysAsked on April 15, 2024 at 12:42 AM
Hi,
I would like to make 2 changes to my header image.
- In the form, remove the image padding size.
- In the review answers, adjust the image to fill the whole box. See the image below.
- In the form, remove the image padding size.
-
Vincenzo JotForm SupportReplied 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:
- In Form Builder, right-click on the Image element, then click on the Trash icon on its right to delete it.
- Now, click on your Logo, then in the panel on the right, click on Remove logo.
- Upload the new logo. You can download the logo merged with your header image from here.
- Finally, set the Logo size to the maximum.
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:
Give it a try and reach out again if you have any other questions.
-
cigarsurveysReplied 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 SupportReplied 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:
- In Form Builder, click on the Form Designer button, on the top right side of the screen.
- Next, click on the Style tab.
- 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 */
Result:
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.
Reach out again if you have any other questions.