- This topic is empty.
-
AuthorPosts
-
July 8, 2016 at 11:13 am #243453
CSSAnomaly
ParticipantI 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.
July 8, 2016 at 1:30 pm #243454Atelierbram
ParticipantCan 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).
July 8, 2016 at 2:32 pm #243455CSSAnomaly
ParticipantThanks 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.
July 8, 2016 at 3:32 pm #243457Atelierbram
ParticipantMy point: keep it simple.
July 8, 2016 at 6:00 pm #243458CSSAnomaly
ParticipantThere 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?
July 9, 2016 at 2:41 am #243459Atelierbram
ParticipantThere 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).July 9, 2016 at 1:43 pm #243463CSSAnomaly
ParticipantThanks 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=0010For some reason jquery is not working.
July 9, 2016 at 3:05 pm #243464Atelierbram
ParticipantYou 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 setoverflow: auto
oroverflow: hidden
on the parent element.
Positioning elementsabsolute
if you want the inner element to fill the outer element’s content area (setposition: relative
on the parent for positioning context):position: absolute; top:0;right:0;bottom:0;left:0;
July 9, 2016 at 10:17 pm #243466CSSAnomaly
ParticipantThank 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.
July 10, 2016 at 7:04 am #243467Atelierbram
ParticipantBest 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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.