Preview and Responsive Views
Preview and responsive controls let you switch between editing and visitor-style review without leaving the builder. Atomicat renders the page inside a preview iframe and stores the active responsive mode as desktop, tablet, or mobile.
Use these controls throughout page building, not only at the end. Many builder style controls write values for the currently selected device, so the active mode matters when you edit spacing, width, order, columns, and other responsive properties.
Preview mode​
The builder header includes an eye icon for Preview. Turning preview on switches the builder into a cleaner view so you can inspect the page closer to the visitor experience while still inside the builder.
Use preview mode to check:
- Section flow without selection handles getting in the way.
- Button, image, form, video, slider, testimonial, and popup placement.
- Whether delayed sections are hidden or visible in the state you expect.
- Whether custom styles loaded into the preview iframe are affecting the page.
- Whether the page still feels coherent after switching responsive modes.
Preview mode is still a builder preview. Third-party scripts, browser extensions, ad blockers, cookies, payment flows, and published-domain behavior can differ from the final published URL.
Responsive views​
The device picker uses these builder modes:
| Mode | Typical width used in builder state | Notes |
|---|---|---|
| Desktop | Current browser window width | Desktop width updates when the window resizes. |
| Tablet | 768px | Represents the tablet range used by the builder's responsive data. |
| Mobile | About 380px in the current builder state | Represents the mobile range; some older preview paths used 360px. |
The selected mode is shown with its icon and a disabled PX width field. Choose the device before editing a responsive style so the value is applied to the intended device key.
Recommended workflow​
- Build the main layout in desktop view.
- Switch to Tablet and review section widths, column counts, order, and media sizing.
- Switch to Mobile and check stacking, tap targets, text size, fixed-width custom HTML, and button placement.
- Make responsive edits while the target device is active.
- Return to Desktop and confirm mobile fixes did not create an unintended desktop override.
- Turn Preview on and repeat the most important conversion path.
- Save the page, then test the published or shareable URL when scripts, tracking, checkout, or redirects are involved.
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. |
Builder-specific caveats​
- Some settings inherit from larger breakpoints until you set a device-specific value. If a mobile edit does not appear to work, confirm the control is marked responsive and that Mobile is the active mode.
- Desktop width follows the browser window, while tablet and mobile use fixed builder widths. A narrow browser window is not the same as switching to Mobile.
- The iframe preview includes Atomicat builder styles, but published pages can still differ because of domain, cookies, external scripts, and runtime tracking.
- Delayed content may be hidden in preview depending on delay state. Use the delay preview/toggle behavior and published testing when timed reveals matter.
- Embedded third-party content can create horizontal overflow even when Atomicat sections are responsive.
Testing notes​
- Test the first screen, every conversion section, and the footer in all three modes.
- Click through buttons, forms, quizzes, and popup triggers in preview when possible.
- On mobile mode, inspect the exact elements that usually cause overflow: videos, iframes, pricing tables, custom HTML, wide images, and buttons with long labels.
- After publishing, open the live URL in a real mobile browser or browser device emulator. Builder preview is not a substitute for live-domain script testing.
Related docs​
FAQ​
Why does the desktop PX value change when I resize my browser?
Desktop mode uses the current browser window width in the builder state. Tablet and mobile use fixed widths, so switch devices with the picker instead of relying on browser resize alone.
Do responsive edits affect every device?
Many style controls store values under the active responsive device. If you edit spacing, order, columns, or widths while Mobile is selected, verify Desktop and Tablet afterward so each breakpoint has the intended value.
Is preview mode the same as the published page?
No. Preview mode renders inside the builder iframe. It is useful for layout and interaction checks, but pixels, custom scripts, domain-specific behavior, cookies, payment flows, and redirects still need live URL testing.
What should I do when mobile has horizontal scrolling?
Switch to Mobile, inspect custom HTML, iframes, videos, images, tables, pricing blocks, and fixed-width sections first. Then reduce width, padding, or column layout for the mobile device mode.