The Flip Box Challenge
This Avada Challenge was too much fun (I need to do a winery website) and addresses several things at once.
The original challenge how to get rid of the extra spacing in the flip box element. It turns out there is 40px of bottom margin in two different classes you have to address. The solution is simple – remove the margins:
While this could be done globally, I would recommend only adding it at the page level, unless you know you will never want it. This is on my feature request list to add more control.
The Other Stuff
As I mentioned, this example shows a variety of features none of which required custom css.
- Placing a single flip box in a column for greater options for responsive layout.
- Using images in place of icons.
- Setting a gradient to split the background colors.
- Using a background image with a gradient.
- Element level type styling (love this feature).
All the colors were pulled from the vineyard image which is by Wendell Shinn and the photo is available on Unsplash.