Top-Align Content in Avada Flip Boxes

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.

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

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

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.

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.

In the Custom CSS box, paste the following code:

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.