Media Queries

In Figma you have separate artboards for desktop, tablet, and mobile. You decide which layers are visible, which fonts are larger, which columns collapse. A media query is how you express exactly that logic in CSS — “apply these rules when the screen is this wide”.

The syntax

@media (max-width: 480px) {
  /* rules inside here only apply when the viewport is 480 px wide or narrower */
}

@media (min-width: 480px) {
  /* rules inside here only apply when the viewport is 480 px wide or wider */
}

Think of it as an if statement for CSS:

max-width = “if the screen is at most this wide, do this” (large → small)
min-width = “if the screen is at least this wide, do this” (small → large)

A real example — card that changes layout

The preview pane below is your screen. Make your browser window narrower (or view on a phone) and watch the card reflow. Because the preview pane is itself about half the page width on a desktop monitor, the max-width: 420px breakpoint will trigger there — you can see the effect without needing a phone.

<div class="card">
  <div class="card__image"></div>
  <div class="card__body">
    <h2 class="card__title">Sunset over the hills</h2>
    <p class="card__text">A short description of the photo that wraps naturally on small screens.</p>
    <a class="card__btn" href="#">View full size</a>
  </div>
</div>

At wider widths the image and text sit side by side. When the pane narrows past 420 px, the single @media (max-width: 420px) block kicks in and stacks them vertically. This is exactly what you would show a developer by switching between your mobile and desktop artboards in Figma.

Changing typography too

You are not limited to layout. You can change font sizes, hide elements, adjust spacing — anything in CSS can be overridden inside a media query.

h1 {
  font-size: 2.5rem;   /* default: large screen */
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.6rem;  /* smaller on narrow screens */
  }
}