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 grater 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.
Our 400+ acre estate has 104 acres planted in 17 different grape varieties.
“As I ate the oysters with their strong taste of the sea and their faint metallic taste that the cold white wine washed away, leaving only the sea taste and the succulent texture, and as I drank their cold liquid from each shell and washed it down with the crisp taste of the wine, I lost the empty feeling and began to be happy and to make plans.”
— Ernest Hemingway, A Moveable Feast