How can I set a different top margin for mobile devices?

  • Profile Image
    pilgrimparking
    Asked on January 17, 2017 at 02:40 PM

    At first I needed a way to reduce the extra space at the top of my form for embedding purposes for my company's website.  I found the working solution of adding the following to my CSS code in the Design window:

    .form-all {

        padding-top : 0;
        margin-top : -60px;
    }

     

    It works, except for one issue: the top little bit of my form being cut off when viewed on a mobile device.

    Is there any way to code it so that it reduces the top margin by less on mobile devices?

    P.S. The "Mobile Responsive" widget did not help.

  • Profile Image
    EltonCris
    Answered on January 17, 2017 at 04:52 PM

    It's easy but that CSS code isn't the right way to do it.

    First, remove that CSS codes in your form and use the following.

    .form-all, .jotform-form{

    padding-top:0 !important;

    }

    This should get rid of the top spacing of the form without any cut off on mobile or desktop.

    Hope this helps!

  • Profile Image
    pilgrimparking
    Answered on January 17, 2017 at 05:21 PM

    That worked, thanks!