visible-lg still visible in xl

[stevehomer]

Lovely idea but first test I did failed.

        <span class="visible-lg">&nbsp; lg</span>
        <span class="visible-md">&nbsp; md</span>
        <span class="visible-sm">&nbsp; sm</span>
        <span class="visible-xs">&nbsp; xs</span>
        <span class="visible-xl">&nbsp; xl</span>

All works fine but when you get to xl size the lg is still visible.

Solution is to add

/smh add/

.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-lg{
    display: none !important;
}

/END smh/

at the end of the second (main) media query section.

I have done my first Pull request - not sure I did it right. We will see.

ATB Steve

[samc449]

I've discovered an oversight with the use of !important mentioned above.

It prevents you from using two visible classes such as visible-xs AND visible-xl on the same element.
Using display: none!important overrides all breakpoints so only the XL breakpoint would show.

Update:
I'm wrong about !important. Bootstrap use this for the default visible classes so it's not that. I think it might be a problem with the passing order...

---

In the screenshot below my window is set to a SM breakpoint. You can see that the .visible-sm class is being overridden by the styles added above.

---

BUT if you compare that to two bootstrap classes instead of using the .visible-xl class you can see that the .visible-sm class is not overridden.

How do we fix this?

[N6REJ]

.visible should be .hidden else you'll never see the css effects as I've told it not too