After setting a media query to adjust the properties of my #secondary wrapper, I noticed an issue.
Here is the media query that was implemented:
@media screen and (max-width: 767px) {
.left-sidebar #secondary {
float: right;
width: 100%!important;
}
The problem arises when the changes are not taking effect until 479px, even though the media query states it should apply at 676px;
Upon inspecting the CSS in Google Dev Tools, the code appears as follows:
@media (max-width: 479px)
@media screen and (max-width: 767px)
.left-sidebar #secondary {
float: right;
width: 100%!important;
}
What could be causing this delay in applying the styles, and what steps can be taken to rectify it?