While using the Google Chrome inspector to simulate the Galaxy S5 (360px) screen, I am encountering issues with detecting the correct screen width. The CSS for 360px is being overridden by the 768px CSS instead. Is there a more effective solution to this problem?
@media only screen and (max-device-width: 360px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:290px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
@media only screen and (max-device-width: 768px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:370px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}