How can I fix the issue with the flip card animation on my Webflow website where the hidden side of the card is sticking out of the container when I changed it from having 3 columns to 6 columns?
TL;DR
- Enable Overflow: Hidden on the card container to prevent visual spillover during flips.
- Ensure front and back card faces are properly sized to match smaller grid cells from the 6-column layout.
- Apply perspective to the outer wrapper (not the flip element), and set Backface Visibility: Hidden on both card sides.
- Adjust card dimensions to fit within narrower grid columns and verify responsiveness across all breakpoints.
The issue likely stems from layout or sizing problems introduced when increasing the grid from 3 to 6 columns, which can affect how 3D transforms and overflow behave in flip card animations.
1. Check Card Container Overflow Settings
- Select the flip card’s parent container (the column or grid cell it's in).
- In the Style panel, make sure Overflow: Hidden is enabled. This prevents the flipping side from showing outside the bounds.
2. Ensure Proper Sizing of Card Elements
- For 6 columns, each card is smaller, so make sure the card and its inner faces scale accordingly.
- Verify that both front and back card faces have the exact same width and height as their parent card container.
3. Apply Perspective at the Right Level
- 3D flip animations rely on
perspective. Apply it to a parent wrapper: - Select the flip card’s outer wrapper (not the flipping element itself).
- In Styles panel, enable Children Perspective (under Transform settings), e.g., set to 1000px.
- Don't apply perspective directly to the rotating card—only on the wrapping element.
4. Set Backface Visibility Correctly
- Select both front and back sides of the card.
- In Styles panel, under Effects > 3D & Perspective, confirm:
- Backface Visibility: Hidden for both faces.
- This ensures the "back" side doesn’t show through when it shouldn't.
5. Double-Check Grid and Column Settings
- With 6 columns, your grid cells are narrower.
- Make sure:
- Cards are not larger than the available column width.
- There's no fixed width on the card that exceeds the grid cell.
6. Test Responsiveness and Breakpoints
- The issue may appear only on specific viewport widths.
- Use Webflow’s Responsive View to test on all breakpoints and adjust as needed (e.g., smaller margin/padding, or card scaling).
Summary
To fix the flip card's hidden side sticking out after moving to 6 columns, apply Overflow: Hidden on the card container, ensure proper sizing and perspective hierarchy, and confirm Backface Visibility is hidden for each side. Also, adapt the card size to fit the new, smaller grid columns.