Padding issue on mobile version of form

  • Profile Image
    kjfeilhof
    Asked on August 09, 2019 at 03:31 PM

    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

  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 03:34 PM

    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. 

  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 03:39 PM

    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


    1565379433Image-1[3].jpg


    1565379463Image-1[4].jpg


    1565379529Image-1[6].jpg1565379537Image-1[7].jpg



  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 03:41 PM

    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

  • Profile Image
    VincentJay
    Answered on August 09, 2019 at 04:55 PM

    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


  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 05:43 PM
    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



    ...
  • Profile Image
    VincentJay
    Answered on August 09, 2019 at 06:20 PM

    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.

  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 06:43 PM
    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



    ...
  • Profile Image
    VincentJay
    Answered on August 09, 2019 at 07:01 PM

    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. 

    1565391443bccfs3.png

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

    1565391618fds536.png

    Please try it and let us know how it goes. 

  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 07:43 PM
    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



    ...
  • Profile Image
    Jed_C
    Answered on August 09, 2019 at 08:15 PM

    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. 

  • Profile Image
    kjfeilhof
    Answered on August 09, 2019 at 10:43 PM
    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! 😊




    ...
  • Profile Image
    Kevin_G
    Answered on August 09, 2019 at 11:52 PM

    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: 

    15654089362019-08-09_21h44_27.png

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

    15654089862019-08-09_21h41_43.png

    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.