Flipbox spacing controls are available for the card container and for individual content elements. Depending on the selected widget and element, controls can be labelled Front Padding, Back Padding, Padding, or Margin. Several of these are registered as responsive controls, so Elementor can expose device-specific values.
Ultimate Flipbox → Style → Container Box Settings → Front/Back Padding
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Adjust Front Padding.
- Select the Back tab.
- Adjust Back Padding.
- Use the dimension link control to link or unlink values.
- Choose one of the available units: px, %, or em.
- Use responsive values at each device breakpoint where the control provides them.
- Click Update to save the page.
Ultimate Flipbox → Title Style / Description Style → Spacing
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Title Style.
- Adjust the title Padding or Margin controls where available.
- Open Description Style.
- Adjust the description Padding or Margin controls where available.
- Use the available units px, %, or em for these dimension controls.
- Click Update to save the page.
Ultimate Flipbox → Icon Style / Button Style → Spacing
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Icon Style.
- Adjust Icon Padding or Icon Margin where available.
- Open Button Style if the widget exposes that section.
- Adjust the button Padding or Margin controls where available.
- Preview the spacing.
- Click Update to save the page.
Post Flipbox → Style → Container Box Settings → Front/Back Padding
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Adjust Front Padding.
- Select the Back tab.
- Adjust Back Padding.
- Adjust the container Margin control if you need space outside the card.
- Use responsive values where the selected control supports them.
- Click Update to save the page.
Story Flipbox → Style → Container Box Settings → Front/Back Padding
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Adjust Front Padding.
- Select the Back tab.
- Adjust Back Padding.
- Adjust the container Margin control if needed.
- Use responsive values where the selected control supports them.
- Click Update to save the page.
Check Responsive Spacing and Click Update
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open Elementor Responsive Mode from the top toolbar.
- Check spacing at Desktop width.
- Check spacing at Tablet width.
- Check spacing at Mobile width.
- Adjust a device-specific value only where the selected control provides responsive settings.
- Click Update to save the page.
Adjust card and content spacing
- Select the widget and open its Style controls.
- Start with the front or back container’s Front Padding or Back Padding setting where available.
- Adjust the padding around titles, descriptions, icons, and buttons using the matching element-level controls.
- Use Margin to change the space outside an element, rather than using padding to solve every spacing issue.
- Preview both sides and check that text and buttons are not crowded or pushed beyond the card.
Tune smaller breakpoints
When a control is responsive, switch Elementor’s responsive preview and adjust its device-specific value as needed. The source uses dimension controls with units such as px, %, and em for several spacing settings; the exact units vary by control. Keep spacing consistent across cards and recheck the layout after changing typography or content length.
For text size and line wrapping, see Style Flipbox Typography. For grid columns and carousel spacing, see Configure the Flipbox Grid Layout and Configure the Flipbox Carousel Layout.
Screenshot to add: the responsive padding or margin control for the card container or content. This is a placeholder, not an existing screenshot.
Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.