Form Layout: How to remove the box shadow from my form?

  • MaidCrew
    Asked on January 15, 2017 at 8:10 AM

    How would we go about getting rid of a form's box-shadow.  It shows up when there's lots of display area like when you're on a desktop monitor... but it doesn't render / show up on tablets or phones.  How can we disable that effect?

    Thanks in advance!

    Jotform Thread 1034887 Screenshot
  • Kevin Support Team Lead
    Replied on January 15, 2017 at 1:19 PM

    Injecting the CSS code below will help you to remove the box shadow from your form: 

    .form-all {

        box-shadow: none !important;

    }

    This guide will help to inject it: How-to-Inject-Custom-CSS-Codes

  • MaidCrew
    Replied on January 15, 2017 at 3:47 PM

    Hey Kevin, thanks for the response. I inserted the CSS in but still getting the box shadow at:

    https://themaidcrew.com/sandbox2

    Form Layout: How to remove the box shadow from my form? Image 1 Screenshot 20

  • Kevin Support Team Lead
    Replied on January 15, 2017 at 6:32 PM

    Thanks for the link, I checked and indeed the box shadow effect still shows. 

    Please try with this CSS code, since there seems to be one applied based on the screen size we need to also cover that, so this one should work: 

    .form-all{

                box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;

                -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;

        }

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

        .form-all{

                box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;

                -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;

        }

    }

     

    Do let us know how it goes. 

  • Kevin Support Team Lead
    Replied on January 15, 2017 at 6:34 PM

    Here is how it looks on my end: 

    Form Layout: How to remove the box shadow from my form? Image 1 Screenshot 20