Injected CSS for mobile not working

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?

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