# Responsive design

> Design a help center that looks great on every screen. Preview your pages across desktop, laptop, tablet and mobile, and fine-tune styles for each breakpoint.

Source: https://www.zenplates.co/documentation/visual-builder/responsive-design (Visual builder › Responsive and dark mode)

Your visitors arrive on every kind of device, and your help center should look considered on all of them. The visual builder lets you preview and refine your design across four breakpoints so nothing is left to chance.

## Previewing at each breakpoint

Use the breakpoint controls in the toolbar to switch the preview between device sizes:

| Breakpoint  | Preview width |
| ----------- | ------------- |
| **Desktop** | Full width    |
| **Laptop**  | 1024px        |
| **Tablet**  | 768px         |
| **Mobile**  | 450px         |

![Previewing the help center at different breakpoints](https://www.zenplates.co/assets/images/documentation/visual-builder/breakpoints.webp)

Switching breakpoints doesn't change your design—it just shows how your current design responds at that width. Most of the time, a layout built with the theme's responsive elements and utilities already adapts gracefully.

## Making responsive adjustments

When you want a value to differ on smaller screens—say a heading that's large on desktop but more compact on mobile—select the breakpoint you want to target, click the small device icon next to the field's label, and change the style. Without the device icon, the change applies to all screen sizes. A responsive override applies only within that breakpoint's range (desktop 1200px and wider, laptop 992–1199px, tablet 768–991px, mobile 767px and narrower), leaving the other sizes untouched.

This mirrors the [responsive variants](https://www.zenplates.co/documentation/utilities/understanding-variants) used throughout the framework, so the result is clean, standard responsive CSS.

Start your design at the desktop breakpoint, then move through laptop, tablet and mobile, adjusting only what needs to change at each size. This keeps your responsive styles minimal and easy to maintain.