If a flipbox extends beyond its column or viewport on a phone, inspect the responsive layout and the content on both sides of the card. Width, spacing, typography, and carousel settings can all affect the available space.
Review responsive layout settings
- Open Elementor Editor and select the affected Ultimate Flipbox, Post Flipbox, or Story Flipbox widget.
- Use Elementor’s responsive preview to inspect the mobile layout, then review the widget’s available responsive controls.
- For grid layouts, check the column setting and the card’s width. Post Flipbox uses the responsive Number of Columns control; the single-card and story widgets also expose responsive sizing controls.
- Review front-side and back-side content, including long titles, descriptions, buttons, padding, and margins. Check typography and border radius if they contribute to the card’s dimensions.
- If using a horizontal layout, check its slide-per-view and gap settings as well as the visible width of the surrounding container.
- Click Update and test at the target viewport size.
Test the actual page width
Check the page inside its real section or column, not only in an isolated preview. If overflow remains, reduce the content or spacing that causes the excess width and retest. The plugin’s horizontal carousel source uses responsive slide counts at 280 px, 768 px, and 1024 px; these are carousel breakpoints, not a guarantee that every page layout will fit without additional adjustments.