I seem to be having trouble with my media queries lately. They used to work fine, but now they seem to only render for specific screen sizes on certain pages. I'm targeting larger screens like (1920 x 1080) and (1680 x 1080). The code snippet is below:
@media only screen and (min-width: 1600px) {
/* Styles for the about page */
}
@media only screen and (min-width: 1680px) {
/* Styles for the services page */
}
@media only screen and (min-width: 1800px) {
/* Styles for projects*/
}
@media only screen and (max-width:1140px) {
}
@media only screen and (max-width:1100px) {
}
@media only screen and (max-width:1000px){
}
@media only screen and (max-width:992px) {
}
@media only screen and (max-width:840px) {
}
@media only screen and (max-width:767px) {
}
@media only screen and (max-width:640px) {
}
@media only screen and (max-width:580px) {
}
@media only screen and (max-width:480px) {
}
@media only screen and (max-width:420px) {
}
@media only screen and (min-width:220px) and (max-width:480px) {
}
@media only screen and (min-width:767px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1200px) {
}
I feel like I might be missing something with how I've structured my media queries. Any insights or suggestions would be greatly appreciated. You can view the actual page here.