Responsive design and accessibility

Design mobile-first pages, use the device views correctly, prevent overflow, and meet core accessibility expectations.

A PageDesigner page should work for visitors using a phone, tablet, desktop, keyboard, screen reader, zoom, light theme, or dark theme.

Device views are review toolsCopy Anchor Link

The desktop, tablet, and mobile controls change the canvas width. They do not create separate versions of the page.

Use them throughout the build:

1. Add or edit a section.
2. Check mobile immediately.
3. Correct structure or copy before adding many style overrides.
4. Check tablet.
5. Finish on desktop and full Preview.

Mobile-first behaviorCopy Anchor Link

PageDesigner models commonly use base classes for small screens and breakpoint prefixes for larger screens:

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

This means one column by default, two from the medium breakpoint, and three from the large breakpoint.

Other useful patterns:

flex flex-col gap-6 lg:flex-row
text-3xl sm:text-4xl lg:text-5xl
px-4 py-12 sm:py-16 lg:py-20
w-full h-auto

See Theme and CSS classes reference.

What to inspect at every widthCopy Anchor Link

StructureCopy Anchor Link

• Columns stack in a meaningful order.
• Related text remains with its image or action.
• No essential content is hidden.
• The visual order matches the reading order.

TypographyCopy Anchor Link

• Headings do not dominate the entire phone screen.
• Paragraphs have readable line lengths.
• Long URLs and unbroken strings wrap.
• Translations fit without clipping.

Images and videoCopy Anchor Link

• Media does not exceed its container.
• The important subject remains visible after cropping.
• Video preserves its aspect ratio.
• Alternative text describes informative images.

ControlsCopy Anchor Link

• Buttons and links are easy to tap.
• Controls have space between them.
• A layout does not depend only on hover.
• Focus remains visible.

SpacingCopy Anchor Link

• Sections are neither crowded nor separated by arbitrary gaps.
• Mobile horizontal padding is sufficient.
• Repeated cards use a consistent gap.

Fix common problemsCopy Anchor Link

Horizontal scrollingCopy Anchor Link

Look for:

• fixed pixel widths;
• large horizontal padding;
• wide images or video;
• long code, URLs, or plan names;
• a grid that does not collapse;
• an absolutely positioned decoration.

Prefer w-full, max-w-*, wrapping, and responsive grid/flex classes.

A crowded mobile heroCopy Anchor Link

Fix the content before micro-adjusting:

• shorten the headline;
• remove the secondary paragraph or action when it is not essential;
• stack actions;
• reduce decorative media;
• use a smaller mobile text size with larger breakpoint overrides.

Overlapping elementsCopy Anchor Link

Inspect Layers. Check position, fixed sizes, negative margins, and z-index. Prefer normal flex/grid flow when possible.

Image subject disappearsCopy Anchor Link

Change the crop/fit approach, use a better source image, or change the layout so the media is not forced into an unsuitable aspect ratio.

Interactive component works only in the editorCopy Anchor Link

Test full Preview and the public page. Confirm optional FlyonUI integration when the model expects it, and verify the component's public markup retains the required safe data attributes.

Accessibility essentialsCopy Anchor Link

HeadingsCopy Anchor Link

Use one clear page-level heading and a logical sequence below it. Choose heading levels for structure, not size.

Alternative textCopy Anchor Link

• Describe useful information.
• Avoid “image of” unless the medium itself matters.
• Use the site's approved decorative-image pattern when no description is needed.

Links and buttonsCopy Anchor Link

• Use descriptive labels.
• Keep the same label for the same action.
• Do not use color alone to communicate status.
• Do not remove visible focus.
• Use a new tab only deliberately.

Contrast and themesCopy Anchor Link

Use Paymenter theme tokens and review light and dark. Pay special attention to muted text, borders, price notes, disabled states, and text over images.

Touch targetsCopy Anchor Link

Use comfortable padding such as px-4 py-2 or larger and leave space between adjacent controls. A roughly 44-by-44-pixel interactive area is a useful target.

Motion and autoplayCopy Anchor Link

Avoid unnecessary motion. Provide video controls and do not rely on automatic sound. Do not add animation that prevents reading or interaction.

Real-device reviewCopy Anchor Link

Canvas widths are simulations. Before a major launch:

• check a real phone;
• check a keyboard-only path;
• zoom the page;
• test a slow or blocked external image;
• test signed-out access;
• check the active site theme, not only the editor theme.

Responsive acceptance checklistCopy Anchor Link

• No horizontal scroll at common narrow widths.
• The primary action appears and remains usable.
• Text is readable without zoom.
• Images and video stay inside their containers.
• Columns stack in the right order.
• Focus is visible.
• Interactive sections work by keyboard and touch.
• Light and dark contrast is acceptable.
• Every supported locale has been checked.
• Full Preview and public verification are complete.