Why are some of my CSS rules not working?

by

CSS Commenting: Use /* ... */, not //... or <!-- ... -->

The problem you’re having is not related to your flex code.

The problem is you’re using line comment syntax for commenting out text, and this is not valid CSS.

button:ACTIVE { // feedback on touch modal
   background: aqua;
}

// next is for images
.img { width: 8vmin; }

So you’re actually posting invalid code which, instead of commenting out the line, is calling CSS error-handling into play, which kills the next rule. In other words, any rule following your // text text text is ignored, just as if you had done this: xheight: 50px.

This is why order is not working for your icon:

// stuff living in #no
#info-div1 {
    order: 3;
    -webkit-order: 3;
}

Stick to the standard CSS commenting method. Start a comment with /*. End a comment with */.

/* stuff to be commented out */

Once you make the adjustments in your code, the order property works fine (and, as you might expect, other changes occur, caused by previously ignored code). See revised demo.

Read more about CSS comments here:

Lastly, on a separate note:

You’re placing vendor prefixed code after the standard unprefixed versions.

#container {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

    align-content: space-between;
    -webkit-align-content: space-between;
}

You should consider reversing this. The unprefixed (W3C) version should go last, so it’s always the preferred version in the cascade. Read more.

More Related Contents:

  1. My Website is Mirror-flipped on iPhone Devices
  2. Center one and right/left align other flexbox element
  3. How do I keep two side-by-side div elements the same height?
  4. How to disable equal height columns in Flexbox?
  5. Proper use of flex properties when nesting flex containers
  6. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  7. Remove space (gaps) between multiple lines of flex items when they wrap
  8. Flexbox: 4 items per row
  9. Equal height columns with CSS
  10. Absolutely positioned flex item is not removed from the normal flow in IE11
  11. Make flex items take content width, not width of parent container
  12. Using flex order property to re-arrange items for desktop and mobile views
  13. Properly sizing and aligning the flex item(s) on the last row
  14. Flexbox fill available space vertically
  15. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  16. Create a responsive navbar sidebar “drawer” in Bootstrap?
  17. Equal space between flex items
  18. How can I make a display:flex container expand horizontally with its wrapped contents?
  19. Why is there vertical scroll on the main container?
  20. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  21. How to center cards in bootstrap 4?
  22. How can I show three columns per row?
  23. Bootstrap navbar: nothing is displayed on smaller devices
  24. How can I create a row-based masonry layout using CSS?
  25. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  26. How do I make flex box work in safari?
  27. Zebra striping a flexbox table with wrapping items
  28. Element with “display: inline-flex” has a strange top margin
  29. Pin a flex item to the bottom of the container
  30. Make flex container take width of content, not width 100%

Leave a Comment