Media Queries

Use media queries to create responsive layouts.

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.

<h1 className="… @sm:ta:c">Good evening!</h1><h1 className="ta:c … @sm:ta:l">Good evening!</h1>

Yumma CSS breakpoints reference:

Prefix	Min Width	CSS Rule
`@sm`	`40 rem` (640 px)	`@media (min-width: 40 rem)`
`@md`	`48 rem` (768 px)	`@media (min-width: 48 rem)`
`@lg`	`64 rem` (1024 px)	`@media (min-width: 64 rem)`
`@xl`	`80 rem` (1280 px)	`@media (min-width: 80 rem)`
`@xxl`	`96 rem` (1536 px)	`@media (min-width: 96 rem)`

Customize Breakpoints

You can extend or override the default media query breakpoints using the theme.screens configuration option in your yumma.config.mjs file.

Create a config file

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    screens: {      "3xl": "112rem",    },  },});

2
Use Custom Breakpoints
The bundler plugins pick up config changes automatically. If you use yummacss watch, restart it to see the changes.
```
<div className="d:none @3xl:d:b"></div>
```

Use Media Queries

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

<p className="d:b … @sm:d:none">Small screen</p>
<p className="d:none @md:d:none … @sm:d:b">Medium screen</p>
<p className="d:none @lg:d:none … @md:d:b">Large screen</p>
<p className="d:none @xl:d:none … @lg:d:b">Extra large screen</p>
<p className="d:none … @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" className="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