THe media query is overriding the native css?

Another question. How would I adjust the tablet size?

The @media screen and (max-width: 600px) works for the phone size, but when i add @media screen and (max-width: 1024px) for tablet, it overrides that. So what is the correct way to use media queries for tablet/phone size. Including landscape/portrait orientation.