Injected CSS for mobile not working

  • Profile Image
    danhenry
    Asked on November 15, 2021 at 08:33 PM

    I have tried to inject some CSS into my form to decrease margins and turn off display for items we don't need. It works well for full-sized forms but when I try and inject the same CSS for mobile using @media queries it doesn't work. Mobile is still showing large spacing and is not working on display:none for specific items.

    Why can I not use @media queries for injecting css?

  • Profile Image
    Nik_M
    Answered on November 16, 2021 at 04:31 AM

    Please use the following CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-line[data-payment="true"] .payment_footer.new_ui {

      display: none!important;

    }

    .form-product-details {

      display : none!important;

    }

    .page-section>li:first-child:not(.form-line-column):not([data-type=control_head]):not([data-type=control_text]):not([data-type=control_button]):not([data-type=control_collapse])+li:nth-child(2):not(.form-line-column):not([data-type=control_head]):not([data-type=control_text]):not([data-type=control_button]):not([data-type=control_collapse]) {

      margin-top: -20px!important;

    }

    }

    Related Guide: How to Inject Custom CSS Codes

    1637055072_61937a60ac7b2_css.PNG