After browsing through similar questions, I couldn't find a solution to my issue. I have a set of media queries and I noticed that they stop working after a certain point. The queries work fine up until @media (min-width: 992px) and (max-width: 1199.98px), but anything beyond that doesn't get applied. I tried rearranging the code by moving the styles below the @media query above it, which made those work but caused this one to stop working. I'm puzzled as to why this is happening. Any thoughts on how to fix it?
@media screen and (min-width: 1500px) {
.provider-specialty h5 {
text-align: center;
}
}
/*---laptop 1366---*/
@media (min-width: 1366px) and (max-width: 1499.98px) {
/* Styles */
}
/*--- XLarge Devices laptop1280(desktop/laptop)--*/
@media (min-width: 1200px) and (max-width: 1365.98px) {
/* Styles */
}
/*--- Large Devices (landscape tablets/medium desktop)IpadAir2 landscape--*/
@media (min-width: 992px) and (max-width: 1199.98px) {
/* Styles */
}
/*--- Medium Devices (portrait tablets/small desktop)--IPadAir2Portrait*/
@media (min-width: 768px) and (max-width: 991.98px) {
/* Styles */
}
/*--Iphone 7 Plus landscape --*/
@media (min-width: 736px) and (max-width: 767.98px) {
/* Styles */
}
/*---Google Nexus 7 Portrait 600 --*/
@media (min-width: 611px) and (max-width: 735.98px) {
/* Styles */
}
/*--- Small Devices (landscape phones/?portrait tablets?) Galaxys7 landscape--*/
@media (min-width: 576px) and (max-width: 610.98px) {
/* Styles */
}
/*-----Phone Landscape- (Apple Iphone SE Only)----*/
@media (min-width: 568px) and (max-width: 575.98px) {
/* Styles */
}