> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive design

> Design for mobile and desktop breakpoints.

Subframe has two breakpoints:

* **Default** — Desktop and tablet (768px and above)
* **Mobile** <Icon icon="smartphone" size={16} /> — 767px and below

## Switching breakpoints

<Frame>
  <img src="https://mintcdn.com/subframe-59800133/rXK64HhL3P7RMdKN/images/editor/editor-breakpoints.png?fit=max&auto=format&n=rXK64HhL3P7RMdKN&q=85&s=b551a2590f0297cad86db5b8e2665176" alt="Breakpoint selector showing desktop and mobile views" width="1920" height="1440" data-path="images/editor/editor-breakpoints.png" />
</Frame>

Click the device selector in the top toolbar to switch between default and mobile views.

## Creating mobile overrides

You can add mobile overrides to both pages and components.

1. Switch to mobile view <Icon icon="smartphone" size={16} />
2. Select an element
3. Modify any property in the Inspector
4. An override indicator (pink dot) appears next to the property

<Frame>
  <img src="https://mintcdn.com/subframe-59800133/E2DcgNWNaQUj3Q4q/images/design-mode/overrides.png?fit=max&auto=format&n=E2DcgNWNaQUj3Q4q&q=85&s=f6d0125ae0975a4b703a125c6c8af011" alt="Inspector showing mobile override with pink dot indicator" width="375" height="346" data-path="images/design-mode/overrides.png" />
</Frame>

To remove a mobile override, click the pink dot to reset to the default value.

## Code export

When there is a mobile override, the exported code uses a `mobile:` prefix in Tailwind, which adds a media query:

```tsx theme={null}
<div className="flex mobile:flex-col">
  {/* Horizontal on desktop, vertical on mobile */}
</div>
```

## FAQ

<AccordionGroup>
  <Accordion title="Why can't I override this property?">
    If you don't see a pink dot, no mobile override is being set.

    Mobile overrides only work for styles that translate to CSS, so some properties without a CSS equivalent cannot have
    a mobile override.
  </Accordion>
</AccordionGroup>