Preview and Responsive Views
Preview and responsive controls help you review how a page looks before publishing.
Use preview mode to inspect the page without normal editing distractions. Use responsive controls to check desktop, tablet, and mobile layouts while editing.
Preview mode​
The builder header includes a preview toggle.
When preview is enabled, the page is shown closer to how visitors will experience it. This is useful for checking spacing, section flow, buttons, media, and overall visual polish.
Use preview mode before:
- Saving final edits.
- Publishing a page.
- Testing a form or button flow.
- Reviewing a page with a teammate or client.
Responsive views​
The responsive controls let you review the page at different device widths.
Use them to check:
- Whether columns stack correctly on mobile.
- Whether buttons remain visible and easy to tap.
- Whether text remains readable.
- Whether videos, images, forms, and product blocks fit the screen.
- Whether spacing feels balanced across devices.
Recommended responsive review workflow​
- Build the main layout in desktop view.
- Switch to tablet view and review section width, spacing, and alignment.
- Switch to mobile view and check stacking, typography, and button placement.
- Fix any layout issues from largest to smallest sections.
- Preview again before saving or publishing.
Common mobile issues to check​
| Issue | What to review |
|---|---|
| Text too large or too small | Headings, paragraphs, buttons, labels, and form fields. |
| Bad stacking order | Multi-column sections, media next to text, and product areas. |
| Horizontal overflow | Wide images, custom HTML, tables, iframe content, or fixed-width containers. |
| Excessive spacing | Padding and margins inherited from desktop styling. |
| Hard-to-tap buttons | Button size, spacing, and position. |
Best practices​
- Do not assume desktop changes automatically look good on mobile.
- Check every conversion section on mobile.
- Review form fields after editing spacing or typography.
- Preview custom HTML and iframe content carefully because external content may not resize automatically.
- Save after completing responsive fixes.
Related docs​
FAQ​
When should I use this Preview and Responsive Views page?
Use this page when you need to understand the workflow, settings, or decisions related to Preview and Responsive Views. It is most helpful before editing a live asset, publishing changes, or troubleshooting behavior in an Atomicat workspace.
What should I check before changing Preview and Responsive Views?
Confirm that you are in the correct workspace, project, page, funnel, site, or account area. Review access permissions, saved changes, publishing status, and any connected integrations before making updates.
How do I verify that Preview and Responsive Views is working correctly?
Preview the affected page or feature, test the main user path in a fresh browser session, and confirm that forms, redirects, tracking, products, quizzes, or publishing states behave as expected.
What should I do if Preview and Responsive Views does not work as expected?
Recheck the configuration described on this page, save the changes again, clear browser cache if needed, and test with a simple version of the setup. If the issue continues, collect the page URL, workspace details, and screenshots before contacting support.