How can I adjust the bottom margin of my embedded form for mobile

  • doron200
    Asked on January 27, 2018 at 9:23 AM

    hi the border at the bottom isnt showing. ive stretched the bottom as far as i possible and still no border completion.. .any ideas? Only for mobile variants..

    https://dollyglam.com/become-a-dolly.htm

  • Support_Management Jotform Support
    Replied on January 27, 2018 at 12:29 PM

    What you're describing is not a border - It's just the gray background of your embedded form. It's cutoff on your website, thus giving the impression that it's a missing border background.

    To fix this, inject the following CSS CODES to your FORM BUILDER:

    .form-all {

        margin-bottom: 12px !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    Result:

    How can I adjust the bottom margin of my embedded form for mobile Image 1 Screenshot 20

  • doron200
    Replied on January 28, 2018 at 11:43 AM

    Sorry it is still not showing even when ive entered the CSS code into the form builder designer
    Regards

    ...

  • Support_Management Jotform Support
    Replied on January 28, 2018 at 12:28 PM

    Can you try adjusting the margin a bit more (e.g. increase the value in px). I am testing your form through the viewport size of an iPhone 7 and it looks good.

    Alternatively, if you're open to suggestions, instead of figuring out how to make your form look the same across tons of varying screensizes, it might be best to just remove the gray background altogether. This would make your form render seamlessly across any device since it will only have a white background.

    If you want to try this approach, remove the previous codes I provided and add the ones below:

    .supernova {

        background: none !important;

    }

  • doron200
    Replied on January 28, 2018 at 1:43 PM
    The supernova solutions resolved it for me. Excellent support! Cheers
    Regards
    ...