Reply To: Media Query Breakpoints Headache

[Atelierbram]

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"
   $("body").addClass("bp-small").removeClass("bp-large"); 

 else if ($(window).width() >= 965 && removedFromSides === true) {
// breakpoint "large"
   $("body").addClass("bp-large").removeClass("bp-small"); 

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.