Skip to content

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.

Host and Player Breakpoints

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.

How to Use

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
}
`
Clone this wiki locally