When using Beaver Builder, chance are you (or your client) will use the Call To Action (CTA) module, put a few in one row, and then realize that the button’s don’t align.
Then you’ll spend quite a bit of time trying to make them align only to realize that they don’t stay aligned at different break points.
Good news, I have some CSS that can help!
Add the following CSS to your WordPress child theme, or to the builder. It should render your modules now with the buttons all aligned.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ——————————————————————— | |
| Module: Call to Action | |
| Requirement: You must have equal column heights. | |
| Requirement: Button layout must be stacked. | |
| ———————————————————————— */ | |
| .fl-module-cta { | |
| display: flex; | |
| height: 100%; | |
| } | |
| .fl-module-cta .fl-module-content { | |
| width: 100%; /* fixes IE11 */ | |
| } | |
| .fl-cta-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .fl-cta-text { | |
| flex-grow: 1; | |
| } |
Make sure to read the requirements in the code as well. Having the columns set to equal hight is a part of the alignment process. It also doesn’t work well when CTA buttons are inline, so make sure they’re stacked.
This doesn’t stop at the CTA module either. If you’re using the Callout module, here’s code to make them align.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ——————————————————————— | |
| Module: Callout | |
| Requirement: You must have equal column heights. | |
| ———————————————————————— */ | |
| .fl-module-callout { | |
| display: flex; | |
| height: 100%; | |
| } | |
| .fl-module-callout .fl-module-content { | |
| width: 100%; /* fixes IE11 */ | |
| } | |
| .fl-callout { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .fl-callout-content, | |
| .fl-callout-text-wrap { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .fl-callout-text { | |
| flex-grow: 1; | |
| } |
If you’re using Ultimate Addons for Beaver Builder, here’s code for the UABB Info Banner module.
The same code can be modified to work with most any module, but it can be tricky based on how many wrappers each module has.
I’ve tested this code back to IE11 and everything is working at the moment. If Beaver Builder changes classes, or adds more wrappers, it will probably need to be updated.
If you don’t know what Beaver Builder is, check out the quick start guide.
Thank you, thank you!
This doesn’t work on my iPad (4th) generation. I tested Safari and Chrome and on both, the following row jumps up and overlaps the row with Callout modules
I’ll have to check and see what’s going on. BeaverBuilder has advanced quite a bit since I wrote this post so some updates may be needed.
Do you have a URL where I can see your work? I tested it on an iPad Air (3rd generation) and it’s working as expected. I’m wondering if there is other code interfering.