Geek Answers Handbook

Why are some of my CSS rules not working?

I have a nested flexbox layout (using bootstrap v4) that changes orientation according to landscape / portrait mode. The first level of the div (which is placed by flexbox using the order property), #no , contains 5 icons that serve as buttons. The order property does not work as I expect on these icons.

If I do not use the order property, the icons are laid out in a natural order; however, if I try to use the order property to display them, this will not work. In code , info-div ( order:3 ) should be the last element. This is not true. I can get the order I want by changing the order in the source; however, I would like to clarify my misunderstanding.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portrait of New York</title> <style> html, body { width:100%; height:100%; } #container { height: 100%; width:100%; display: flex; display: -webkit-flex; 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; } #no { padding: 1rem; display: flex; display: -webkit-flex; flex-wrap: nowrap; -webkit-flex-wrap: nowrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; align-content: space-between; -webkit-align-content: space-between; flex: 1 1 auto; -webkit-flex: 1 1 auto; } .icon { margin: auto; flex-grow:1; flex-basis: auto; } button:ACTIVE { // feedback on touch modal background: aqua; } // next is for images .img { width: 8vmin; } // stuff living in #no #info-div1 { order: 3; -webkit-order: 3; } #minus { order: 0; -webkit-order: 0; } #hb2 { order: -1; -webkit-order: -1; } #plus { order: 1; -webkit-order: 1; } #comment-button-div { order: 2; -webkit-order: 2; } @media screen and (orientation: landscape ){ #container { flex-direction: row; -webkit-flex-direction: row; } #no { flex-direction: column; -webkit-flex-direction: column; height: 100%; max-width: 10rem; order: 0; -webkit-order: 0; } } @media screen and (orientation: portrait ){ #container { flex-direction: column; -webkit-flex-direction: column; } #no { flex-direction: row; -webkit-flex-direction: row; max-height:10rem; width:100%; order: 2; -webkit-order: 2; } } </style> <script src="https://www.google.com/recaptcha/api.js" async defer> </script> </head> <body> <div id="container"> <div id='no'> <div id='minus' class="icon" title="Not special."> <a href="#" id="nHeart" > <img class="img icon" src="http://gps-photo.org/images/Not.svg"/> </a> </div> <div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon"> <div class="dropdown"> <img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/> <div class="dropdown-menu"> <a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a> <a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a> <a class="dropdown-item cmore" data-toggle="modal" href="#myModal"> </a> <a class="dropdown-item cpony" data-toggle="modal" href="#myModal"> </a> <a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a> </div> </div> </div><!-- end hb2 --> <div id='plus' class="icon" title="Loving it!"> <a href="#" id="heart1" > <img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/> </a> </div> <div id='comment-button-div' class="icon" title="Click for comments"> <a class="comment-page" data-toggle="modal" > <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/> </a> </div> <div id='info-div1' class="icon" title='Information' > <a class="info-page" data-toggle="modal" > <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/> </a> </div> </div> </div> <!-- jQuery first, then Bootstrap JS. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> </body> </html>
+1
source share
1 answer

CSS comments: use /* ... */ not //... or <!-- ... -->

The problem you are facing is not related to your flexible code.

The problem is that you are using syntax syntax for commenting text, and this is invalid CSS.

 button:ACTIVE { // feedback on touch modal background: aqua; } // next is for images .img { width: 8vmin; }

So what you are actually doing is sending inappropriate code that instead of commenting out the line causes CSS error handling in the game, which kills the following rule. In other words, any rule following your // text text text is ignored as if you did: xheight: 50px .

This is why order does not work for your icon:

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

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

 /* stuff to be commented out */

After making changes to your code, the order property works fine (and, as you might expect, other changes occur due to previously ignored code). See the updated version .

More about CSS comments here:

Finally, in a separate note:

You place the code with the vendor prefix after standard versions without the prefix.

 #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 think about it. The continuous version (W3C) must last last, so it is always the preferred version in cascade. More details .

+5
source

More articles:


All Articles