Media Queries

Build flexible user interfaces with responsive variants.

Mobile-first approach

By default, all base utilities support responsive variants. Use breakpoints like sm:*, md:*, lg:*, xl:* & xxl:* to apply specific rules to different screen sizes.

Target small screens first, then override for larger viewports.

<h1 class="... sm:ta-c">Good evening!</h1>
<h1 class="ta-c ... sm:ta-l">Good evening!</h1>

Yumma CSS breakpoints reference:

Prefix	Min width	Pixel value
sm	`@media (width >= 40 rem)`	640px
md	`@media (width >= 48 rem)`	768px
lg	`@media (width >= 64 rem)`	1024px
xl	`@media (width >= 80 rem)`	1280px
xxl	`@media (width >= 96 rem)`	1536px

Use media queries

Resize your browser window to see how these elements respond to viewport width.

Small screen

<p class="d-b p-4 c-slate sm:d-none">Small screen</p>
<p class="d-none md:d-none p-4 c-slate sm:d-b">Medium screen</p>
<p class="d-none lg:d-none p-4 c-slate md:d-b">Large screen</p>
<p class="d-none xl:d-none p-4 c-slate ta-c lg:d-b">Extra large screen</p>
<p class="d-none p-4 c-slate ta-c xxl:d-b">Double extra large screen</p>

Touch devices

The pc:* variant targets devices with a coarse pointer (typically touch screens). Use this to apply larger tap targets & touch-friendly spacing.

Activates on touch-enabled devices with coarse pointer input.

<button type="button" class="p-4 bg-indigo c-white pc:p-6">
  Larger padding on touch devices
</button>

Touch device reference:

Prefix	Media Query	Description
`pc:`	`@media (pointer: coarse)`	Touch devices