How to make a webpage mobile friendly with css media queries

I have added some css media queries but it doesn't seem to do make any change i mean i have added this code

@media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}

but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference am i missing something here ? do i have to add something more than this in my css to make it work ?