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

  • Profile Image
    MaidCrew
    Asked on January 15, 2017 at 08: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!

  • Profile Image
    Kevin_G
    Answered on January 15, 2017 at 01: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

  • Profile Image
    MaidCrew
    Answered on January 15, 2017 at 03:47 PM

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

    https://themaidcrew.com/sandbox2

  • Profile Image
    Kevin_G
    Answered on January 15, 2017 at 06: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. 

  • Profile Image
    Kevin_G
    Answered on January 15, 2017 at 06:34 PM

    Here is how it looks on my end: