Breakpoints

The three breakpoints

These are not defaults you can override. A media query at any other width has no matching viewport in the Designer, so the styles would be dropped on import — the rulebook rejects them instead of letting that happen silently.

Write them as named blocks

Prefer the named block over a hand-written query. The renderer expands each block to its media query, and the editor writes back into the same block.

{% breakpoint tablet %}
.features__grid { grid-template-columns: 1fr; }
{% endbreakpoint %}

When a raw media query is still right

Blocks only cover the three viewport widths. Anything a viewport cannot express still needs a real query, and those are allowed:

• @supports and @container
• print
• (hover: hover) and prefers-reduced-motion
• min-width queries, for mobile-first work

Grid has one extra requirement

Whenever a rule declares grid-template-columns, it must also declare grid-template-rows. Webflow's grid editor expects both axes to be explicit.

.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}