Responsive controls help shape how visitors use Flipboxes on mobile, but the published page still needs to be checked at the screen sizes your visitors use. Use Elementor’s responsive preview to inspect the actual content, then test the published page on a touch device when possible. This is a practical checklist, not a claim that live-device testing has already been performed.
Elementor Responsive Mode → Desktop / Tablet / Mobile
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open Elementor’s Responsive Mode from the top toolbar.
- Select Desktop preview.
- Select Tablet preview.
- Select Mobile preview.
- Click Update to save the page after changes.
Post Flipbox → Layout Orientation: Vertical → Responsive Columns
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Set Layout Orientation to Vertical for grid testing.
- Locate Number of Columns.
- Review the Desktop column value.
- Review the Tablet column value.
- Review the Mobile column value.
- Check for clipping at each breakpoint.
- Check text wrapping at each breakpoint.
- Check spacing at each breakpoint.
- Click Update to save the page.
Post Flipbox → Layout Orientation: Horizontal → Slides Per View
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Set Layout Orientation to Horizontal for carousel testing.
- Locate Slides Per View.
- Review the value at each responsive breakpoint.
- Locate Horizontal Slides Gap.
- Review the gap at each responsive breakpoint.
- Check the Previous Arrow Icon navigation.
- Check the Next Arrow Icon navigation.
- Click Update to save the page.
Story Flipbox → Layout Orientation → Responsive Layout
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Review Layout Orientation.
- For a grid, set Layout Orientation to Vertical.
- Locate Number of Columns.
- Review the column count for each responsive breakpoint.
- For a carousel, set Layout Orientation to Horizontal.
- Locate Slides Per View.
- Review Slides Per View at each breakpoint.
- Locate Horizontal Slides Gap.
- Review the slide gap at each breakpoint.
- Check the previous/next arrow navigation when using the carousel.
- Click Update to save the page.
Preview Each Breakpoint, Click Update, Test Published Page
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Preview the front-side content at each breakpoint.
- Preview the back-side content at each breakpoint.
- Check the text.
- Check the images.
- Check the icons.
- Check the buttons.
- Check card spacing.
- Click Update to save the page.
- Test the published page on an actual touch device when possible; Elementor preview is not a substitute for live-device testing.
Check the card at each breakpoint
- Open the page in Elementor and switch between desktop, tablet, and mobile responsive previews.
- For Post Flipbox or Story Flipbox in Vertical orientation, review Number of Columns. The source defaults are 3 for desktop, 2 for tablet, and 1 for mobile.
- Check titles, descriptions, icons, and buttons for clipping, awkward wrapping, or insufficient padding.
- Preview both the front and back of each card, including image backgrounds and overlays where used.
- If using Horizontal orientation, review responsive Slides Per View, Horizontal Slides Gap, and the previous/next navigation.
- Test the configured flip interaction on a touch device and make sure visitors can reach all card content.
Save and verify the published page
Make the necessary responsive adjustments, click Update, and inspect the published page rather than relying only on the editor preview. Recheck after changing text length, fonts, backgrounds, or layout orientation because these changes can affect card height and readability.
For responsive columns, read Configure the Flipbox Grid Layout; for carousel controls, read Configure the Flipbox Carousel Layout.
Screenshot to add: the widget in mobile preview with the full front or back content visible. This is a placeholder, not an existing screenshot.
Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.