Padding issue on mobile version of form

On this form I need to reduce padding so that "Photo Prints" sits right under carousel.

Here is the form itself: https://www.jotform.com/build/92043538785162

I have it running on this page: https://shop.hallofframes.com/photo-prints

I've attached a screenshot of the area I would like to remove padding/margin from. Can you help me w/ CSS for this? 

I would dig deeper on my own...but appreciate any help you can offer. This is one of several forms I have running on our brand new website launched last week. 

Thanks!

Kurt

I am having the exact same issue on this form: https://www.jotform.com/build/91766346331157

It is on this page on my website: https://shop.hallofframes.com/acrylic-prints

On this one, I am also having issue with the button of my form running into the footer, on mobile. Please advise. 

This form, is having both of the same issues as above: https://www.jotform.com/build/91766804258164

It is on this page on my website: https://shop.hallofframes.com/metal-prints

Lastly, this form is having the issue w/ padding/carousel, but is not having problem w/ Submit button running into footer. Please advise on all (4) forms mentioned herein. 

This form, is having both of the same issues as above: https://www.jotform.com/build/91615583658165

It is on this page on my website: https://shop.hallofframes.com/canvas-prints

Please add this custom CSS code to your form:

@media only screen and (max-width: 641px)

@media screen and (max-width: 961px)

@media screen and (max-width: 500px)

@media only screen and (max-width: 968px)

.content-area p, .content-area ul li {

margin: -10px;

}

To add it to your form, please follow this guide: 

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I’ve added this CSS code on each of the forms, and it is not working. I am still seeing large gap of white space between carousel and text heading.

Please advise.

KURT FEIL PROJECT & DEVELOPMENT MANAGER
Office: 602.923.4998 ext.110
Cell: 520.869.0184
hallofframes.com let’s hang out
4710 E Thunderbird Rd. | Phoenix, AZ | 85032



...

Please give me more time to check this further. I will contact you again on this thread once I am done with the custom CSS code.

Thank you.

I really appreciate your help. Sorry…I’m kinda stuck on this one and it is a pain point for my VP approving newly launched pages.



KURT FEIL PROJECT & DEVELOPMENT MANAGER
Office: 602.923.4998 ext.110
Cell: 520.869.0184
hallofframes.com let’s hang out
4710 E Thunderbird Rd. | Phoenix, AZ | 85032



...

Let's fix the header issue first before moving on to another issue. To reduce the padding and margin of the header, please open the Advanced Designer page. 

After that, select the Header and update the Height Padding and Vertical Margin.

Please try it and let us know how it goes. 

Thank you! I have followed this step to 0 out margins and padding in header. It is not correcting my white space issue.



KURT FEIL PROJECT & DEVELOPMENT MANAGER
Office: 602.923.4998 ext.110
Cell: 520.869.0184
hallofframes.com let’s hang out
4710 E Thunderbird Rd. | Phoenix, AZ | 85032



...

For https://shop.hallofframes.com/acrylic-prints page, please try the CSS code below:

@media only screen and (max-width: 480px){

iframe#JotFormIFrame-91766346331157 {

    margin-top: -39px;

}

}

And for this page https://shop.hallofframes.com/metal-prints, please try the CSS code below:

@media only screen and (max-width: 480px){

iframe#JotFormIFrame-91766804258164 {

    margin-top: -39px;

}

}

And for this page https://shop.hallofframes.com/photo-prints, please try the CSS code below:

@media only screen and (max-width: 480px){

iframe#JotFormIFrame-92043538785162 {

    margin-top: -66px;

}

button#input_2 {

    margin-top: -24px !important;

}

}

Send us a screenshot of how it looks on your end after adding those CSS code. Looking forward for your response. 

Please see attached screen shot from Acrylic Prints page. The others all look the same, each after I loaded respective CSS snips you provided.

The white space is still there on mobile. It seems to have improved some, but on all 4 forms, it’s still there. The issue w/ Submit button hitting footer, is totally fixed. Thank you all so much for always being so helpful. I’m really feeling stuck on this white space at carousel/header spot.

Standing by for any other ideas! 😊




...

I have been checking the pages you provided and the issue does not seem related to the JotForm code at all, for example, the iFrame code does not have a padding at the top and upon checking the source code it seems like the padding is actually on the elements on your page. 

Here are some images about it so you can understand better what I'm referring to: 

- The iFrame code does not have padding at the top, the form is currently displaying very close to the top side of the iFrame: 

- Here is another screenshot showing which elements are currently causing the gap: 

As you can see on this last screenshot, the HTML elements are outside the JotForm's iFrame code. Also, I can see my colleague has provided some CSS code to remove this gap, kindly note that the code must have been injected to your site and not to the form as it targets the iFrame code. 

If you're unsure about how or where to add the code, you may consult this with your web developer or contact support if you're using a web site builder, the same applies in case the given code does not work, kindly contact them and ask how to manipulate the element's padding from your page editor or in case you have a web developer you may ask him to reduce the element's padding from the site's code. 

Thanks.