Show element ONLY for tablet

[Stephan Müller]

Hi,

first of all, thanks for this kick-ass module!

I'd like to create some visibility classes similar to the ones used in the Foundation framework, specifically a query that only shows an element when it's displayed on a tablet. How can I accomplish this? The SCSS

.md-only {
  @include media("<tablet", ">tablet") {
    display:none;
  }
}

doesn't work. It kinda makes sense, since I guess that

1. <tablet means [0 - tablet], and
2. >tablet means [tablet - ∞]

How can I make my class md-only work?

Thanks!

[Kaoru Kohashigawa]

Folks typically avoid targeting a specific screen size. I.e. do x on 813px because tablets are always changing and there is no standard what so ever. When you do <tablet, >tablet that's essentially what you're doing.

I think what you want is @include media("<mobile", "<=tablet") where mobile is where you break for small screens, and tablet is where you would want the biggest tablet screen.

[Stephan Müller]

Thanks, but first I guess you mean "<phone" (and not "<mobile", "mobile" doesn't exists) and second, this doesn't do the trick since it's also visible on large.

[Kaoru Kohashigawa]

.md-only {
   display: none;
   @include media(">phone", "<=tablet") {
      display: block;
   }
}

[Thomas ZILLIOX]

There is no OR operator in the library (for now, see #143).
The only way is to duplicate the call:

.md-only {
  @include media("<phone") {
    display:none;
  }
  @include media(">=tablet") {
    display:none;
  }
}

[Eduardo Bouças]

Have a look at #109, maybe it's something similar to what you're trying to achieve.

In any case, you shouldn't think of include-media breakpoints (whether they're called phone/tablet/desktop or small/medium/large) as a range. These are single values which can be used to construct a range. By default, tablet is just an alias for 768px, so when you say you want to target only tablet devices, you're saying you want to target devices with exactly 768px, which I'm assuming is not really what you want.

I'll close this, since I don't think there's nothing wrong with the library or anything we could add to make this possible. Feel free to reopen if you think otherwise.