Media Queries

Learn how to make responsive layouts with Yumma CSS.

Mobile-first approach

By default, all base utilities can be used with responsive variants. You can use breakpoints variants such as sm:*, md:*, lg:*, xl:* and xxl:* to apply specific rules to different screen sizes. For example:

Don't use breakpoints to apply styles to mobile devices. Use them to style small screens, then override for larger screens.

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

Here's a reference for all the breakpoints available in Yumma CSS:

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

Using media queries

Try resizing your browser window to see how the text changes based on viewport width.

This is a small screen.

<p class="c-slate d-b p-4 sm:d-none">This is a small screen.</p>
<p class="c-slate d-none md:d-none p-4 sm:d-b">This is a medium screen.</p>
<p class="c-slate d-none lg:d-none md:d-b p-4">This is a large screen.</p>
<p class="c-slate d-none lg:d-b p-4 ta-c xl:d-none">This is an extra large screen.</p>
<p class="c-slate d-none p-4 ta-c xxl:d-b">This is double extra large screen.</p>

Touch devices

The pc:* variant targets devices with a coarse pointer (typically touch screens). This lets you apply larger tap targets and touch-friendly spacing on mobile devices.

This variant activates on touch-enabled devices with coarse pointer input.

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

Here's a complete reference of all touch devices media query variant:

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