# Responsive Design

Turn a desktop composition into a strong tablet and mobile experience with responsive positions, spacing, content order, and real-view verification.

# Responsive Design

Responsive design preserves meaning, order, readability, and usable controls across Desktop, Tablet, and Mobile; it does not copy identical geometry. Start on Desktop, then inspect automatic reflow before locking a smaller layout.

## Start with the Tablet preview

Switch to Tablet and inspect the editing banner, canvas width, block order, spacing, wrapping, and the layout lock state. A locked layout means Tablet has an authored arrangement; it does not mean the page is frozen or broken.

![Luna Tablet preview with the Tablet editing banner and locked layout state](https://lunasites.io/api/luna-gallery/1785863591042-a6l9x6-01-tablet-preview-locked-layout.jpg/@@images/image)

## Tablet: review the 12-column composition

Translate relative spans instead of copying Desktop numbers. Check whether text/media pairs still support the reading order, bounded surfaces keep safe padding, and controls remain comfortably sized. Unlock or re-author only when automatic reflow cannot preserve the intended hierarchy.

## Then review the Mobile preview

Switch to Mobile and inspect the 8-column stack, burger navigation, text wrapping, media placement, and locked state. Look for content that relied on hover, side-by-side space, or a desktop overlap.

![Luna Mobile preview with burger navigation, the Mobile editing banner, and locked layout state](https://lunasites.io/api/luna-gallery/1785863592664-5588vp-02-mobile-preview-locked-layout.jpg/@@images/image)

## Mobile: protect the reading order

Headings should introduce the content that follows, screenshots should stay beside their explanations, and the primary action should remain easy to find. Side-column blocks need an intentional top, bottom, or hidden placement in the mobile flow.

## Know what each breakpoint owns

Desktop is the broad composition. Tablet and Mobile can inherit automatic reflow or store explicit positions and supported Style overrides. A locked breakpoint records an authored layout; change it only with a clear reading-order or geometry reason.

## Size by content or composition

Text, buttons, listings, and other content-driven blocks should follow rendered content. Images, video, shapes, and other frame-driven media may keep intentional proportions. Do not shrink an image simply because a text-height audit is compact.

## Touch, type, and accessibility checks

Keep body text readable, headings from wrapping into awkward single words, controls large enough to tap, focus visible, and essential meaning available without hover. Check reduced motion, contrast, link recognition, and media alternatives.

## Common responsive mistakes

Locking before reviewing reflow; copying Desktop spans numerically; removing all mobile inset; clipping controls; reversing semantic order; keeping desktop-only overlap; and using fixed height to create whitespace around content-driven blocks.

## Practical checklist

Correct order. Readable type. Balanced density. Safe padding. No horizontal scroll. Intentional media crop. Usable keyboard and touch controls. Visible focus. No unintended overlap. Compact content-driven height.

## Next steps

Review The Style Panel for necessary breakpoint overrides, then test Navbar and Footer on representative pages. Use the release workflow only after all three Views pass.