This is my first attempt at working with responsive design, and I seem to have encountered a bug. When I shift part of the browser off-screen and expand it to around 1345 pixels, it seems to trigger the CSS set for 1224 pixels.
//Currently, only @media all and @media screen are functioning
@media only screen and (min-width : 321px) {
/* Styles */
// div { border: 3px solid purple;}
}
// All other media queries are not being applied, as confirmed through trial and error.
// Works at 1346
@media only screen and (min-width : 1224px) {
@import "layouts/laptop/layout";
@include header-large(1224);
@include logo-mixin;
@include nav-large(1224);
@include registrar-mixin;
@include presenter-mixin(1224);
@import "bodies/laptop/body";
@include index-detail-mixin;
@include show-mixins;
@include object-location;
}
I am using Mac OS Mav, and everything appears to be working correctly in Safari, FF, and Chrome Canary. However, Chrome started behaving strangely after I added jQuery UI. It seemed like JavaScript wouldn't run when the dev tools were open for some time, but that issue seems to have been resolved after using jshint and adding semicolons. This problem was specific to Chrome, as FF and Safari worked fine. I have also tried disabling all extensions and reloading the page, but that did not fix the issue. My understanding of CSS is limited, so I'm unsure how to proceed.
EDIT: Just a couple of days ago, everything was working perfectly before this sudden CSS malfunction occurred overnight.