I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the site at a smaller resolution, like 320px width, the styles from the 720px width are also being applied and taking precedence due to their placement in the cascade. To work around this issue, I have been using the !important declaration for the smaller size query every time, but I know this cannot be the correct solution.
While I cannot include my entire CSS code here, let me give you an example of the problem I am facing. If I have two DIVs positioned side by side on a large tablet or small desktop screen, but I want them to stack vertically on top of one another on a smartphone:
@media screen and (max-width:479px){
div{width:100%}
}
@media screen and (max-width:1159px) and (min-width:980px){
div{width:49%;float:left}
div:first-child{margin-right:2%}
}
When I check the website between 320px and 479px width, the styles meant for the range of 980px to 1159px are loaded instead, forcing me to use !important declarations along with resetting float to none and margin to 0. Why is this happening and could it be that I am missing something in my approach?