Equal Button Height

Beaver Builder
1

I’m using the Button Group feature and need to set the button heights to the same size, regardless of the amount of text displayed. I can find button width but not height. How can I set a universal button height? I’m not very familiar with CSS so if that is required I will need detailed instructions, please.

2

Hi @Muffy, you can use custom CSS:

  1. Add a custom class to your Buttons Group module > Advanced tab, like my-buttons-group
  2. Add this CSS:
.my-buttons-group .fl-button-wrap, 
.my-buttons-group .fl-button {
    height: 100%;    
}
.my-buttons-group .fl-button-width-full .fl-button {
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

At most simple, custom CSS can be added via the BB Tools menu when editing a BB layout (top left of the BB bar):

  • BB Tools > Layout CSS/JS > CSS tab (only for the edited layout)
  • BB Tools > Global Settings > CSS tab (sitewide)

More info in BB KB: https://docs.wpbeaverbuilder.com/beaver-builder/styles/code/custom-css/

Capture d’écran 2021-11-17 à 19.14.11
Capture d’écran 2021-11-17 à 19.14.111161×559 34.2 KB

3

Hi, I am also trying this but when copying and pasting the code above it doesn’t work. I’m not sure whether I need to adjust the coding to ensure my actual button group name is captured? Am I missing something?