The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media Query Breakpoints Headache Reply To: Media Query Breakpoints Headache


Best way to solve this would be setting and removing classes on the body element within those browser-window-width-query conditional statements in javascript

 if($(window).width() <= 964 && removedFromSides === false ) {
// breakpoint "small"

 else if ($(window).width() >= 965 && removedFromSides === true) {
// breakpoint "large"

And in the CSS remove the mediaqueries and use those class-names to target the browser-window-width instead, like:

/* @media screen and (min-width: 765px) and (max-width:979px) { */
.bp-small [id="page-wrapper"] {
  height: 1080px;
  margin: 0 auto;

Now those breakpoints in CSS kick in at the same window-width as in the javaScript, because they are informed by the javaScript and are thus the same.
Updated my fork of your demo.