Breakpoints tokens
Breakpoint#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
Mobile portrait (max-width) |
var(--rh-breakpoint-2xs-max, 575px)
|
||
|
Mobile portrait |
var(--rh-breakpoint-xs, 576px)
|
||
|
Mobile landscape (max-width) |
var(--rh-breakpoint-xs-max, 767px)
|
||
|
Mobile landscape |
var(--rh-breakpoint-sm, 768px)
|
||
|
Mobile landscape (max-width) |
var(--rh-breakpoint-sm-max, 991px)
|
||
|
Tablet portrait |
var(--rh-breakpoint-md, 992px)
|
||
|
Tablet portrait (max-width) |
var(--rh-breakpoint-md-max, 1199px)
|
||
|
Tablet landscape |
var(--rh-breakpoint-lg, 1200px)
|
||
|
Tablet landscape (max-width) |
var(--rh-breakpoint-lg-max, 1439px)
|
||
|
Desktop small |
var(--rh-breakpoint-xl, 1440px)
|
||
|
Desktop small (max-width) |
var(--rh-breakpoint-xl-max, 1679px)
|
||
|
Desktop large |
var(--rh-breakpoint-2xl, 1680px)
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
