Unable to show content just for x-small and small form factor

[KeirBG]

I'm trying to display a button if the form factor of the device is x-small or small, but hide if for medium and large. The behaviour I am looking for is essentially hidden-md and hidden-lg from Boostrap.

I've tried using the visibility classes : slds-x-small-show-only and slds-small-show-only, but the problem is these default to hiding the element and only showing it if the form factor matches the media query:

  .slds .slds-x-small-show-only {
    display: none; }
  @media (min-width: 320px) and (max-width: 479px) {
      .slds .slds-x-small-show-only {
        display: block; }

thus whichever style class appears last hides the element if the media query doesn't match.

In version 0.9.2 slds-small-show-only appears after slds-x-small-show-only, so the content is hidden on x-small by the small default of display:none

[stefsullrew]

Thanks @KeirBG - Did you try the converse? USing the .slds-max-x-small-hide style classes? Those will only show from that size and up. (If you have a CodePen or something that demonstrates the problem, that would be grand.)

I was just reading the documentation and find it lacking. Let me experiment and either update the classes or document more clearly.

[keirbowden]

I did try the max-hide classes, but I only want to show up to a specific width, not above a specific width. I'll try to put together a sample over the next couple of days. (I have two logins to github by the way :)

[brandonferrua]

@KeirBG I see what you're needing, I'll get some utility classes in for you.

[kaelig]

Closing this as it's also been opened as #263