Responsive Design
Lyna provides a responsive design workflow built on Tailwind CSS breakpoints. Edit styles at specific screen sizes, resize frames to match devices, and preview multiple viewports simultaneously.
Tailwind breakpoints
| Breakpoint | Min width | Default preview width | Typical use |
|---|---|---|---|
| Base | 0px | 375px | Mobile (default, no prefix) |
| SM | 640px | 640px | Large phones |
| MD | 768px | 768px | Tablets |
| LG | 1024px | 1024px | Laptops |
| XL | 1280px | 1280px | Desktops |
| 2XL | 1536px | 1536px | Large screens |
Tailwind is mobile-first: unprefixed styles apply to all sizes. Prefixed styles (e.g., md:flex-row) override at that width and above.
Breakpoint selector
The breakpoint selector sits at the top of the Styles panel with all six breakpoints as clickable buttons:
- Mobile icon for Base and SM
- Tablet icon for MD
- Laptop icon for LG
- Desktop icon for XL and 2XL
How breakpoint editing works
Select a breakpoint and modify a style:
- Lyna prefixes the Tailwind class with the breakpoint (e.g.,
md:flex-row) - The frame resizes to the breakpoint's preview width
- Previous breakpoint preview styles are cleared
- Changes flush to the sandbox and the iframe soft-reloads
Returning to Base restores the frame's previous width.
Device presets
The frame top bar has a device selector with real device dimensions:
Desktop
| Device | Resolution |
|---|---|
| Desktop | 1440 x 1024 |
| Wireframe | 1440 x 1024 |
| TV | 1280 x 720 |
| iMac | 1280 x 720 |
Laptop
| Device | Resolution |
|---|---|
| MacBook Air 15 | 1536 x 960 |
| MacBook Pro 14 | 1512 x 982 |
| MacBook Pro 16 | 1728 x 1117 |
| MacBook Pro | 1440 x 900 |
| Surface Book | 1500 x 1000 |
Tablet
| Device | Resolution |
|---|---|
| iPad Pro 12.9 | 1024 x 1366 |
| iPad Pro 11 | 834 x 1194 |
| iPad Air 10.9 | 820 x 1180 |
| iPad Mini 8.3 | 744 x 1133 |
| Surface Pro 8 | 1440 x 960 |
| Android Expanded | 1280 x 800 |
Phone
| Device | Resolution |
|---|---|
| iPhone 17 Pro Max | 430 x 932 |
| iPhone 17 Pro | 393 x 852 |
| iPhone 17 | 393 x 852 |
| Android Large | 360 x 800 |
| Android Small | 360 x 640 |
Selecting a preset resizes the frame to match. You can also enter Custom dimensions.
Frame rotation
The Rotate button toggles between portrait and landscape by swapping width and height. Useful for testing tablet layouts in both orientations.
Quick device presets
Four common presets are available from the breakpoint controls:
- Desktop (1440px)
- MacBook Air (1536px)
- iPad Pro 11 (834px)
- iPhone 16 (393px)
Multi-frame preview
The canvas supports multiple frames at once:
- Add frames at different viewport sizes to see multiple breakpoints simultaneously
- Compare mobile, tablet, and desktop side by side
- Each frame operates independently for scrolling, interaction, and navigation
Powerful for verifying responsive layouts across all target devices without resizing a single frame.
Responsive style workflow
- Start with Base (mobile): Design the mobile layout first. Set layout, spacing, and typography at Base.
- Move up to MD: Click MD. Frame resizes to 768px. Adjust for tablet, e.g.
flex-coltomd:flex-row. - Move up to LG: Click LG. Frame resizes to 1024px. Add desktop-specific adjustments like wider containers or larger fonts.
- Test at all sizes: Use the device selector or drag resize handles. Add frames for side-by-side comparison.
- Refine in code: For complex responsive behavior, edit Tailwind classes directly in the code editor.
Tips
- Design mobile-first: Start at Base and work up. Follows Tailwind's approach and produces cleaner CSS.
- Use multi-frame canvas: Mobile and desktop visible at the same time catches layout issues you'd miss testing one size at a time.
- Test with real device presets: Use actual device dimensions instead of arbitrary sizes.
- Check in Preview mode: After responsive changes, switch to Preview and resize the window to test breakpoint transitions.