How to set separate media queries to effect the same element? - html

Question

I am trying to optimize my mobile webpage experience throughout several iPhone screens, particularly the 5/5s and 6/6s. I'm trying to effect the position attribute of an element in a different way depending on the screen i.e, "if the screen is a 5/5s, do this", "if the screen is a 6/6s, do this". However, one query just overrides the other instead of doing its own specific thing.
Here is my CSS:
/* for iPhone 6/6S */
#media (max-width:730px) {
.fore-man {
top: 1100px;
}
/* for iPhone 5/5S */
#media (max-width:560px) {
.fore-man {
top: 1100px;
}
How do I correct it to be screen specific & not just override the previous query?

Answer 1

Would adding a min width to your 6/6s query do the trick?
/* for iPhone 6/6S */
#media (max-width:730px) and (min-width: 561px) {
.fore-man {
top: 1100px;
}
}
/* for iPhone 5/5S */
#media (max-width:560px) {
.fore-man {
top: 1100px;
}
}
According to this article, targeting device screens is better done with device-width properties.
Take a look, here
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}