21

I am new with semantic-UI and i love with the framework. They have vast of helpful documentation though, and more so confusing thing.

How does the Responsive visibility work?

There are the mobile only tablet only small monitor onlylarge monitor only for the container... and some of the code, I found that there was computer only, device only ? What are the difference? thank you.

isherwood
  • 58,414
  • 16
  • 114
  • 157
postsrc
  • 732
  • 3
  • 9
  • 26

2 Answers2

37

Updated to reflect current docs and version 2.4.2

Responsive Visibility works by hiding a certain element (usually a ui container, but can also be e.g. grid rows) on specific screen sizes. For example, <div class="ui container mobile only"> would only be shown when the screen is less than 768px wide.

The documentation for Grid has a Device Visibility section which demonstrates several possible visibility modifiers:

  1. Mobile (mobile only)
  2. Tablet (tablet only)
  3. Tablet and Mobile (tablet mobile only)
  4. Computer (computer only)
  5. Large screen (large screen only)
  6. Widescreen (widescreen only)
  7. All Sizes (no modifier)

The documentation doesn't explicitly mention what the device breakpoints are. Like most things, they can be configured via SASS variables when building Semantic UI and are defined inside site.variables. The default breakpoints are:

  1. mobile only will only display below 768px
  2. tablet only will only display between 768px - 991px
  3. computer only will always display 992px and above
  4. large screen only will only display between 1200px - 1919px
  5. widescreen only will only display 1920px and above

As seen in the documentation for Grid, it's possible to combine these as well - e.g. tablet mobile only and mobile computer only are perfectly valid.

fstanis
  • 5,234
  • 1
  • 23
  • 42
  • 2
    In latest version, you should use `large screen only` instead of `large monitor only` – Snook Feb 24 '16 at 14:16
  • something that doesn't make sense is that my laptop displays BOTH the computer and widescreen content because it falls in both categories. Its because computer only doesn't have a max width. If I omit computer only then i have nothing to cover 991 - 1200 px – Andy Mar 06 '18 at 15:56
  • That's by design, they are not mutually exclusive - "widescreen" is a subset of "computer", computer really only means "neither phone nor tablet". – fstanis Mar 06 '18 at 21:34
  • You can change them if you build Semantic UI yourself. I updated the reply to include this. – fstanis Nov 29 '18 at 00:27
2

This can't display below 768px:

<div class="ui container mobile only">

The correct expression is below:

<div class="ui container mobile only grid">
allenski
  • 1,652
  • 4
  • 23
  • 39
Keyo
  • 46
  • 3