Site Designer Guide
responsive breakpoints media queries custom breakpoints

Custom breakpoints

Breakpoints define the viewport widths at which your layout changes. Site Designer ships with four sensible defaults, and you can add, edit, or remove them to match your project’s needs exactly.

Default breakpoints

Every new project starts with four breakpoints:

NameWidth
Mobile480 px
Tablet768 px
Desktop1024 px
Wide1280 px

These cover the most common device classes and are a solid starting point for most projects. You’re not required to use all four — unused breakpoints simply never generate any media queries in your CSS.

Opening the breakpoint manager

Click the breakpoints button next to the width slider at the bottom of the canvas. The breakpoint manager panel opens, listing all current breakpoints with their names and pixel values.

Adding a new breakpoint

  1. Open the breakpoint manager

    Click the breakpoints button next to the width slider.

  2. Click the + button

    Click the + (Add breakpoint) button at the bottom of the manager panel.

  3. Enter a pixel value

    Type the viewport width in pixels — for example, 1440 for an extra-wide breakpoint. Press Enter to confirm.

  4. Name the breakpoint (optional)

    Give the breakpoint a descriptive name, like “XL” or “Ultrawide,” to make it easier to identify in the breakpoint mode menu.

The new breakpoint appears as a dashed line on the width slider track immediately.

Editing a breakpoint value

Click the pixel number next to any breakpoint in the manager. The value becomes editable. Type the new width and press Enter. All styles already scoped to that breakpoint update automatically — no need to re-enter them.

Removing a breakpoint

Hover over a breakpoint row in the manager and click the trash icon that appears. Site Designer will warn you that removing a breakpoint also removes all styles scoped to it.

How breakpoints generate media queries

The type of media query generated depends on your responsive strategy setting:

  • Desktop-down (default): Breakpoints generate max-width queries. A breakpoint at 768 px produces @media (max-width: 768px) { … }.
  • Mobile-first: Breakpoints generate min-width queries. A breakpoint at 768 px produces @media (min-width: 768px) { … }.

You set this in Project Settings → Responsive Strategy. See Mobile-first vs. desktop-down for guidance on which to choose.