Enlite PrimeEnlite Prime

Responsive

Log In

Responsive

You are here:app / layouts /  responsive

Media Queries

CSS media queries is the idiomatic approach to make your UI responsive.. We provide some CSS-in-JS helpers to do so. In the following demo, we change the background color (red, blue & green) based on the screen width.

down(sm): red
up(md): blue
up(lg): green

src/app/containers/Layouts/demos/MediaQueries.js

Hidden

Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. only='sm' or only='md', 'xl'. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.

innerWidthxssmmdlgxl
widthxssmmdlgxl
smUpshowhide
mdDownhideshow
Breakpoint up

Using any breakpoint up property, the given children will be hidden at or above the breakpoint.

xlUp
Current width: lg
Breakpoint down

Using any breakpoint down property, the given children will be hidden at or below the breakpoint.

smDown
mdDown
lgDown
Current width: lg
Breakpoint only

Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).

Current width: width: lg;

src/app/containers/Layouts/demos/Breakpoint.js

Integration With Grid

It is quite common to alter Grid at different responsive breakpoints, and in many cases, you want to hide some of those elements.

src/app/containers/Layouts/demos/BreakpointGrid.js