Skip to main content
Subframe has two breakpoints:
  • Default — Desktop and tablet (768px and above)
  • Mobile — 767px and below

​
Switching breakpoints

Breakpoint selector showing desktop and mobile views
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
  2. Select an element
  3. Modify any property in the Inspector
  4. An override indicator (pink dot) appears next to the property
Inspector showing mobile override with pink dot indicator
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: 
<div className="flex mobile:flex-col">
  {/* Horizontal on desktop, vertical on mobile */}
</div>

​
FAQ

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.