Fizz uses a mobile-first approach to responsive design. This means that we start with the smallest screen size and work our way up. We use a set of breakpoints inspired by common device resolutions to define the different screen sizes and apply styles accordingly. These are mainly used inside of the component styles to define how they should shift at different screen sizes, but there may be a few cases where you need to use them in your own styles.

See Tokens for implementation and usage.

Token Minimum width Mixin CSS
$mobile 375px @include mobile @media (min-width: 375px) { ... }
$tablet 700px @include tablet @media (min-width: 700px) { ... }
$desktop 1024px @include desktop @media (min-width: 1024px) { ... }
$max 1440px @include max @media (min-width: 1440px) { ... }
$max-with-margin 1536px @include max-with-margin @media (min-width: 1536px) { ... }
@import "../../../../node_modules/@getprovi/fizz/src/scss/_tokens/tokens";

.product-listing-container {
margin-inline: $spacing-16; // mobile margin
@include tablet {
margin-inline: $spacing-32; // tablet margin
@include desktop {
margin-inline: $spacing-48; // desktop margin
@include max-with-margin {
margin-inline: auto; // max-width margin