Having trouble implementing CSS for a specific device.
I tested my application on two different simulators:
- Screen size: 320 x 500
- Screen size: 320 x 588
The issue I'm facing is that the CSS always defaults to the second screen size (320 x 588). I suspect this is because it meets the criteria of min-device-width being 320. How can I make sure the CSS for the first screen size (320 x 500) is applied when the device has a width of 320 and height of 500?
I don't have much experience with min-device-width and max-device-width.
/* IOS ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 500px) {
//style here
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 588px) {
//style here
}