Media Query Breakpoints Headache

[CSSAnomaly]

I have been trying to solve this problem for quite sometime now but the solution has eluded me til now.

Basically I have a responsive web page that is consisted of four unordered lists which form the perimeter of a large box when the page width is 965 pixels and above.

When the page width is less than 965 pixels, these unordered list will not form the perimeter of the box but will instead stack on top of each other.

The problem is my page breaks when the page width is between 964 and 948 pixels.

Please follow this link https://jsfiddle.net/dk1hz8gw/4/ to see my markup, script, and style.

Please drag on the edge of the page to expand or shrink the page width.

[Atelierbram]

Can see why some of the logic is also in the javascript with the classes being set there on different screen-sizes. Tried something like this ones and found this complicated matters a lot, because of having that logic in two places: in JavaScript and in the CSS media-queries: it’s confusing. Don’t know if this is helpful but maybe try if this could be done just with CSS (media-queries).

[CSSAnomaly]

Thanks for your reply but I don’t know what point your are trying to make. Having styles in media query and in script is a common practice.

[Atelierbram]

My point: keep it simple.

[CSSAnomaly]

There was no way to achieve what I was trying to do using pure CSS. There is no CSS equivalent to jQuery insertAfter, insertBefore, etc. So how would you achieve all that and keep it simple as you have stated, without the use of javascript?

[Atelierbram]

There is no CSS equivalent to jQuery insertAfter, insertBefore, etc. So how would you achieve all that

That is not what I meant with:

because of having that logic in two places: in JavaScript and in the CSS media-queries: it’s confusing

What I mean is handling the logic in the mediaqueries in one place. And for me that place would be CSS.
So for example in the jQuery javascript there are styles set and unset with .css and .removeAttr("style"). When this would be done with adding, removing and/or toggling classes, then those classes could be targeted and styled within the CSS mediaqueries: in my opinion it’s easier that way to see what’s going on. That will also make it easier to progressively enhance the layout.

Anyway there is a 15px difference between the calculated width in the javaScript and in the CSS (when checked in DevTools). So maybe jQuery $(window).width() doesn’t take the vertical scrollbar into account or something (so this also may vary in different browsers).

[CSSAnomaly]

Thanks for replying. I removed all the styles in the javascript and placed them in the CSS file as you’ve suggested.

I can see that the problem is visible when the page width is between 964 and 948 pixels. For some reason my unordered lists are not stacking on top of each other.

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 have moved my markup, css, and styles to codepen
http://codepen.io/CSSAnomaly/pen/kXGowA?editors=0010

For some reason jquery is not working.

[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; 

[CSSAnomaly]

Thank you for your help, the number of places where my web page breaks are fewer. I have checked my page in Firefox, Internet Explorer Edge, and Chrome browsers and I noticed that the page still breaks.

In Chrome the web page breaks when the page width is between 962 and 968 pixels. In Firefox and Chrome, the page breaks at other page widths.

I tried adding 5 more pixels to the media query breakpoints but that didn’t help.

[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.

[Author]

Posts