Use CSS to top-align content in Avada Website Builder Flip Boxes.

Estimated reading time: 7 minutes

The Avada Website Builder is a fantastic system for building websites, with numerous features, tools and options for developing any website you can imagine. While the out-of-the-box elements and options are truly amazing, occasionally I encounter limitations which require CSS to overcome. One such limitation I encountered recently is with the flip box element. By default, content in the flip boxes is centered vertically. I wanted mine to be top-aligned. There is no option for this in the element’s settings, so CSS is required to effect this change.

Default Flip Boxes

By default, Avada flip boxes do not have equal heights enabled. That results in flip boxes that look like this:

Avada Flip Boxes without Equal Height

Making the flip boxes have an equal height is a setting in the element settings, as shown below:

Avada Flip Boxes Equal Heights Setting

Setting the Equal Heights to Yes causes the flip boxes to all be the same height, as shown below. However, the content is centered vertically in the boxes. If you want the content top-aligned, there is no option in the settings to accomplish this.

Avada Flip Boxes with Equal Heights

Use CSS to Top-Align the Content

Now comes the fun part! Avada allows you to apply custom CSS either site-wide or by page or post. If you want all the flip boxes on your site to have their content top-aligned, then add it to Avada>Options>Custom CSS. If you want to affect a single page or post, add it to the the Custom CSS section under Page Options. I will demonstrate this using Avada Live.

First, toggle on the options sidebar. Then select Page Options and then Custom CSS.

Custom CSS Page Option

In the Custom CSS box, paste the following code:

Copy to Clipboard

This code, combined with the Equal Heights option set to Yes, top-aligns the content in the flip boxes and keeps them all equal in length.

Flip Boxes Equal Heights with Content Top-Aligned