Need help with @media print css

  • Profile Image
    AgilityAssoc.Canada
    Asked on October 03, 2017 at 07:02 PM

    Hi,

    For form 43074357920960 I want to eliminate all my special css code for printing. I am having trouble with the border shadowing. Here is the code;

    @media print{    header, #header_33, #id_33, #id_65 { display : none;     

    body { background : white; color : black; margin : 0; border : 0; }

        #container #content #main {width : 90%; margin : 0px;padding : 0px; border : 0; }

        *

    { color : #000; border : 0;  background-color : #fff;background-image : #fff; }

        .form-all {background : #fff !important;

            border : 0; 

            box-shadow : inset 0px 0px 0px 0px #fff !important;

            -webkit-box-shadow : inset 0px 0px 0px 0px #fff !important;

            -moz-box-shadow : inset 0px 0px 0px 0px #fff !important;

            -o-box-shadow : inset 0px 0px 0px 0px #fff !important;

            border-radius : 0px !important;

            -webkit-border-radius : 0px !important;

            -moz-border-radius : 0px !important;        

        }

        .form-line { width : 100% !important; padding : 0 !important; margin : 8px 10px !important;}

        .form-textbox, .form-dropdown, .form-textarea {

            background : #fff !important; border : 1px solid #ccc;}   

        li { padding-top : 14px !important;}

    }

    The highlighted section has no effect in blocking the shadow so is likely the incorrect code. I tried putting the code at the bottom so as to be the final controling css.

    Can you please offer some insight.

    Thank you, Robert

  • Profile Image
    BDAVID
    Answered on October 03, 2017 at 09:38 PM

    I am not sure what you need, do you want to eliminate your "@media print" CSS code, or do you want to customize it?

    If you want to just remove the border shadow in the print version, use this code:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    @media print{

    .supernova .form-all, .form-all {

        box-shadow: none !important;

    }

    }

    Result: https://form.jotform.com/72757766780978 

  • Profile Image
    AgilityAssoc.Canada
    Answered on October 04, 2017 at 10:19 AM

    Hi,

    I wanted to modify it. I will add  box-shadow: none !important;

    Thank you, this is what I needed.

    Regards, Robert