Forge Guide › Responsive design

Responsive design

Forge edits responsive layouts by writing real media queries into your stylesheet. There is no proprietary breakpoint system to learn and nothing to convert on export.

Switching breakpoints

The viewport buttons in the top bar switch between Desktop, Tablet and Mobile. The canvas resizes to that width, and the page reflows exactly as it would in a browser at that size - including any media queries that already exist in your CSS.

The distinction that matters: the canvas width is what you preview at, while the media query is what gets written. Previewing at 834px means your tablet rules apply from 1024px down, which is what you usually want.

Desktop styles are never overwritten

Switch to Mobile, change a font size, and Forge writes that change inside the mobile media block. Your desktop rule is untouched. Switch back and the original value is still there.

.fx-a1b2c3 {
  font-size: 62px;
}

@media (max-width: 640px) {
  .fx-a1b2c3 {
    font-size: 30px;
  }
}

This sounds obvious but it is where most visual editors go wrong: they write a single value and lose the other breakpoint entirely.

Why media block order matters

CSS has no concept of "more specific because it is a media query". A media block and a base rule with the same selector have identical specificity, so whichever comes last in the file wins.

That means if a base rule were appended after a media block, it would silently override your mobile styles at every screen size. Forge prevents this by keeping media blocks after all base rules, sorted widest to narrowest:

/* base rules */
.card { padding: 32px; }

@media (max-width: 1024px) { .card { padding: 24px; } }
@media (max-width: 640px)  { .card { padding: 16px; } }

At 500px both queries match. Because the 640px block comes later it wins, which is the behaviour you want. Forge re-sorts on every write, so you cannot end up with them the wrong way round.

A practical workflow

1. Build the desktop layout first and get it right.
2. Switch to Mobile and fix what breaks - usually multi-column grids and oversized type.
3. Check Tablet last. It often needs nothing, because it inherits desktop and is corrected by the 1024px block only where you touched it.

Grids

The common change is column count. Select the grid container, set grid-template-columns to three columns on desktop, two on tablet and one on mobile. Each lands in its own block.

Type

Large display headings almost always need a mobile override. A 62px hero heading at 390px wide will wrap badly; 30 to 36px usually reads better.

Spacing

Section padding that looks generous on desktop tends to waste a phone screen. Halving vertical padding at the mobile breakpoint is a reliable improvement.