Reply To: Media Query Breakpoints Headache

[Atelierbram]

You said that it might have something to do with the vertical scroll bar, if that is the case how would I compensate for that and make it work in all browsers.

I added 15px to the breakpoints of the mediaquery in my fork of your demo

@media screen and (min-width: 765px) and (max-width:979px) 
@media screen and (min-width: 980px) and (max-width:1084px) 

Not based on anything else than looking for when the layout breaks in Chrome DevTools, no real science I’m afraid. Will this work in all browsers across devices? Well … will have to check, Firefox is OK, Safari less so.

For some reason jquery is not working

Just a small syntax error on line nr. 20 and 21: missing period before removeClass

Cleaned up some of the code in the CSS. For clearing floats, setting width: 100% on the floated element itself can work too, but another way to clear floats is to set overflow: auto or overflow: hidden on the parent element.
Positioning elements absolute if you want the inner element to fill the outer element’s content area (set position: relative on the parent for positioning context):

   position: absolute;
    top:0;right:0;bottom:0;left:0;