Spacing & Sizing – Width, Height, Padding & Margin – Oxilab

Getting the size and spacing of your flip boxes right is key to a polished, professional look. The Flipbox plugin gives you precise control over card dimensions, column layout, padding, and margins — all in pixels, without touching CSS.

Card Width and Height

These two settings define the size of each individual flip box card.

Width

The width of each card in pixels (e.g., 300). This is the base width for each card in your grid.

Height

The height of each card in pixels (e.g., 250). This controls how tall each card is.

Choosing Good Dimensions

Use Case	Suggested Width	Suggested Height
Services section (3 columns)	280–320px	220–280px
Team members (3–4 columns)	240–280px	280–340px
Portfolio / image-heavy (3 columns)	300–360px	240–300px
Feature cards (2 columns)	360–420px	200–250px
Full-width single card	500–600px	300–400px

Note: On smaller screens (tablets, phones), the cards will naturally stack into fewer columns and may resize. Your chosen pixel values are the desktop size.

Columns

The Columns setting controls how many flip box cards appear side by side in a row. Options are 1, 2, 3, or 4 columns.

1 column – Full-width single card layout
2 columns – Great for before/after comparisons or pairs of features
3 columns – The most common layout for services or team members
4 columns – Compact grid; works best with smaller cards and shorter content

Margin Top & Left

These settings control the outer spacing around the entire flip box grid — the space between the flip box and other content on the page.

Margin Top – Space above the flip box grid (in pixels)
Margin Left – Space to the left of the flip box grid (in pixels)

Use Margin Top to add breathing room between the flip box and a heading or paragraph above it. The spacing between individual cards is handled by the layout style itself.

Front Face Padding

Found in the Front Face settings, these padding values control the inner spacing of the front face — the gap between the card’s edge and its content (icon, image, title).

Padding Top – Space from the top edge to the first content element
Padding Left – Space from the left edge to the content

Increase these values if your icon or title feels too close to the edge of the card.

Back Face Padding

Similarly, the Back Face settings include padding controls for the back face inner spacing.

Back Padding Top – Space from the top of the back face to the description text
Back Padding Left – Space from the left edge to the description text

Text-Level Padding & Margin

Beyond card-level padding, you also have padding controls on individual text elements:

Heading Padding (4 sides: top, bottom, left, right) – Controls spacing around the front title text
Info Text Padding (4 sides) – Controls spacing around the back description text
Info Text Margin (4 sides) – Controls the outer margin around the description text block
Button Padding (top, left) – Controls inner spacing of the back button

Common Spacing Fixes

Title too close to top: Increase Front Heading Padding Top
Description too close to button: Increase Info Text Margin Bottom
Button feels cramped: Increase Button Padding Top and Padding Left
Cards too close to page content above: Increase Margin Top on the flip box
Icon overlapping title: Adjust Front Padding or Icon Width/Height settings