-
Notifications
You must be signed in to change notification settings - Fork 2
CSS Breakpoints
Tatiana edited this page May 16, 2021
·
5 revisions
The standardized breakpoints that should be used across the application can be found in the frontend config.js
.
The host breakpoints and player breakpoints have been separated into two separate keys, as players can use devices with sizes that run down from a small mobile phone, to a large desktop. In contrast, hosts may only have device widths that are supported from small desktops to extra large screens (desktops, televisions, etc).
The breakpoints are based on the minimum widths needed for a particular device size.
import {breakpoints} from '/path/to/config.js'
// We can destructure the object further to refer to the specific player or host breakpoints we need
const {playerBreakpoints} = breakpoint
const myElement = styled.div`
media (min-width: ${playerBreakpoints.smallMobile}){
// styles
}
media (min-width: ${playerBreakpoints.largeMobile}){
// styles
}
`