> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-gtmbot-restructure-dark-mode-docs-v2.mintlify.site/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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/editor/editor-breakpoints.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=f7b1cc66868fff39303c23ca9a42f8d4" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/design-mode/overrides.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=2c4586bcfce045713791db8f50dbfd71" 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>