css - media Queries conflict -

i trying make site responsive on 2 devices

using below media queries

@media screen , (min-device-width : 600px) , (max-device-width : 1024px) , (orientation : portrait){  }

and

@media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait){  }

but while opening site on samsung tab applying ipad's media queries style

what can this?

you want avoid overlap in media queries. don't think of in terms of device, screen size. target 600-767 pixels in one, , 768-1024 in another, so:

samsung tab in portrait

@media screen , (min-device-width : 600px) , (max-device-width : 767px)

samsung tab in landscape , ipad in either

@media screen , (min-device-width : 768px) , (max-device-width : 1024px)

Parth Code