I’m using media queries for two smartphone resolutions given below:
1) (smartphone 412 * 915 )
2) (smartphone 385 * 854 )
However, I am experiencing issues with overlapping styles between these two resolutions. Here’s the CSS code I'm currently using:
@media only screen and (min-width: 412px) and (max-width: 915px) { /* smartphone (2) --- (smartphone 412 * 915 ) --- ---- (actual 412 * 915 ) --- */
body { background-color: rgb(234, 149, 149); /* portrait color */
}
@media only screen and (orientation: landscape) { /* Styles specifically for landscape orientation */
body { background-color: #F4F4F4 !important; /* landscape color */ } }
}
@media only screen and (min-width: 384px) and (max-width: 854px) { /* smartphone (1) --- (smartphone 385 * 854 ) --- ---- (actual 385 * 854 ) --- */
body.index-page.is-smartphone { background-color: #a3d093; /* portrait color */ }
@media only screen and (orientation: landscape) { /* Styles specifically for landscape orientation */
body { background-color: purple !important; /* landscape color */ }
}
}
I expected to apply distinct styles for each resolution without any overlap. However, both resolutions are conflicting in their styles, resulting in unintended behavior. What could be causing this issue, and how can I resolve it?
Top comments (0)