Responsive @media request to remove style declarations

Question

I am not familiar with @media requests, and what I am trying to do is responsive delete / change some CSS when browsing the browser is reduced below a certain resolution, or the mobile device viewing the page is also below the same specified resolution.

I need .side remove float: left; position: fixed; width: 150px; float: left; position: fixed; width: 150px; with a resolution of 500 pixels wide and .main to remove border-left: 1px solid #000; margin: 0 0 0 170px; border-left: 1px solid #000; margin: 0 0 0 170px;

 .side { display: block; float: left; overflow: hidden; position: fixed; width: 150px; } .main { border-left: 1px solid #000; margin: 0 0 0 170px; } 

Any help or explanation is appreciated.

Answer 1

So you can do it

 @media only screen and (max-width: 500px) { .side { float: none; position: static; width: auto; } .main { border-left:0; margin: 0; } } 

Answer 2

 .side { display: block; float: left; overflow: hidden; position: fixed; width: 150px; } .main { border-left: 1px solid #000; margin: 0 0 0 170px; width: auto; } @media only screen and (max-device-width : 500px) { .side { float: none; position: static; width: auto; } .main { border: 0; margin: 0; } }