css for mobile devices how to make ‘@media all’ work on wordpress child theme

i have this code in my wordpress child theme (both work on their own) and i’m trying to get the top code to load on a normal screen, and the bottom two to load on smaller screens (mobile devices).

the @media all command doenst seem to do anything, have i done something wrong? is there another or better way to do this?

Thank you!

#tab_slide {
left: 0px;
height: auto !important; 
width: 25%;
}


@media all (max-width: 1200px) {
#tab_slide {
left: 0px;
height: auto !important; 
width: 50% !important;
}
}

@media all (max-width: 1200px) {
#tab_slide_include {
padding: 0px;
}
}