Why is it that we have XS as a view option but NONE of the fly out menus allow me to set XS settings. In my instance I have a main menu that I want to hide certain menu items on medium screens down to XS screens . I have options in the fly out for the display property for print, XL, LG, MD, and SM but nothing for XS
So right now when I scale my browser down the menu is all sorts of not good since I need to hide display items on XS screen sizes as well. Am I missing something?
Technically, the initial option is the XS since this it based on mobile first it means XS+ setting the SM option means SM+ excluding XS and setting MD means MD+ excluding XS&SM
So the first option is for all break points do the following.
Saj
So setting the SM to display:none should in theory set the XS to display:none as well yes?
If that's the case then I may have an issue, because when I set my SM to display:none on the elements in question, they re-appear when you go to XS both in BSS and Chrome.
No actualy, set the very first option to display:none then if you want it to comeback into view say at MD, set MD to display:block
If you look at your screen shot for width, the first option you have for width:3 is technically the XS size.
Saj
Awesome I will give that a shot, thank you!
Your welcome, glad I could help :)
Just note that the first selectbox (property option drop down) applies to all screen sizes which is why XS is included. All the others apply to "it's" perspective screen size and larger.
Saj
I would prefer to have XS listed separately and leave the default for other sizes. I've also noticed if I set SM to none, but every other one is set to default, the content disappears in every size setting.
You can also look at this along the lines of CSS inheritance and it's cascading. The last declaration of a CSS property gets inherited by it's children. The default setting can be looked at as not going to do anything different than what I've inherited. This is because Bootstrap is based on Mobile first therefore XS is what you initially develop for, then grow into larger screen sizes. Meaning Bootstrap is based on min-width media queries not max-width or min-width and max-width screen size. Now it does have some of both but it's not mainly built on them.
Example HTML
< body>
<div class="heading">
< h1>Page Title< /h1>
< p>A bunch of non-sense wording< /p>
</div>
< /body>
Example1 CSS, color of body applies to all text overriding the browser's default styling
body {
color: red;
}
All of the text is going to be red because the H1 and Paragraph elements have inherited the Body elements color declaration.
Example2 CSS, color of class heading applies to all of it's children's nodes text overriding the element body styling
body {
color: red;
}
.heading {
color: green;
}
All of the text within the div with the class heading is going to be green because the H1 and Paragraph elements have inherited the heading classes color declaration.
Example3 CSS, color of element H1 applies to all of it's children's nodes text overriding the class heading styling
body {
color: red;
}
.heading {
color: green;
}
h1 {
color: yellow;
}
All of the text within the H1 is going to be yellow it's inheritance of the declaration of the H1 color, however, the Paragraph will remain green because it's inheritance is still the class heading.
So in a similar vein, the Options pane when you set SM to none, all of the screen sizes below SM in the Option pane will inherit that same thing because they are set as default. Default in this situation is to mean not going to override my inherited setting.
@media (min-width: 576px) {
h1 {
display: none;
}
}
Any screen that is at least 576px wide or wider then don't display the H1. In yours and with this example the H1 will only ever show if the screen width is smaller than 576px i.e. XS size. So in order to have the H1 display again when on a large screen you need to set something like LG to Block.
@media (min-width: 992px) {
h1 {
display: block;
}
}
This effectively hides the H1 element when the screen is SM and MD, but shows the H1 when it's XS and LG, XL.
Saj
Because the new way of doing things is smallest to largest, that makes XS the default. That's not something that is just set arbitrarily by the BSS devs, it's set by Bootstrap of which this app is setup for using. So ... XS is now your new default. There is no "other" default setting, you don't set that yourself unless you are planning to override all the size setups for Bootstrap in which you would then be able to set something else as default and would not be able to use BSS to do your site. It's a choice you need to make I guess.