Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Grid] add support for `only=small screen`

See original GitHub issue

Semantic/Fomantic UI has breakpoints for small screens (https://fomantic-ui.com/elements/container.html) and there is support for device visibility breakpoints (https://fomantic-ui.com/collections/grid.html#device-visibility). But at the same point there is no small screen only 😦

It will be great to have a separate option to restrict visibility for small screens.

Original request: https://github.com/Semantic-Org/Semantic-UI-React/issues/3991

Issue Analytics

State:
Created 3 years ago
Comments:9 (7 by maintainers)

Top GitHub Comments

1reaction

lubber-decommented, Jul 22, 2020

Ok, i think, i understood now 😄

However, while we are at it, why don’t we move this logic out of the the grid and make it globally available, so it can be used by any component? I personally use this ever since https://github.com/Semantic-Org/Semantic-UI/issues/1114#issuecomment-201057438

and already commented in the helper class thread at https://github.com/fomantic/Fomantic-UI/issues/22#issuecomment-429109342

That addional “small screen” could then be added globally @fomantic/admins ?

0reactions

DeeeeLANcommented, Jul 22, 2020

We already have a computer breakpoint at 992px, we just need a class that is only computer, not computer and large monitor or widescreen. Bootstrap has the “large device” class, but we go straight from “medium device” to “extra large device” in our grid, or you go from medium to “large and extra large” using the computer breakpoint.

Here is my use-case. I have a grid of tables that I rearrange to be responsive based on the screen width, so I might be 3x2 on the large monitor and widescreen, but 2x3 on the small monitor and tablet screens. This is not currently possible using the provided grid size classes, so I have had to do it manually.