Issues with button alignment and spacing

Hi - I’m using beaverbuilder plugin on some internal pages of a site I’m putting together. I’m trying to have three buttons that align horizontally and are equally spaced. I’m nearly there, but need a bit of help!

You can see the page here: http://bibleleagueca.wpengine.com/where-we-work/brazil/.

I’ve set it up so that I’ve got five columns, the furthest left and furthest right both being blank and the middle three each containing a button. The problems I’m having are as follows:

I want to space the columns so they are 32.5%, 10%, 15%, 10% and 32.5%. But when I alter the percentage widths in beaverbuilder I can’t get them to stick to these percentages. How do I do that? Or is there a better way to center align these buttons?

Another problem that I’m having is that the buttons collide with each other when I reduce the screen width. How do I prevent that happening? At any resolution I need the buttons to be equally spaced from each other and for them to be center aligned on the page.

Essentially I want the buttons to work like they do on the home page (http://bibleleagueca.wpengine.com/). If you reduce the width of the browser on the home page you’ll see that the buttons are neatly aligned and spaced, no matter the width of the screen. (I’m using Altitude Pro which is why the buttons are different on the home page)

One last question that I have regarding the buttons is how I can change the hover-over background to be a solid colour. I’ve set the button as being transparent as I want that to be the default state. But when a user hovers over the button I want the background to become solid. How do I achieve that?

Thanks so much for any help you can give me.

James

Hey James,

Thanks for getting in touch and welcome to the BB forums!

Getting that column layout will be quite tricky. You can check this thread for more information. The guys will be looking into fine tuning the UI of the Page Builder later this year though and that’s most likely one of the things they will work on.

I think a better way to achieve what you are after is by using 3 column layout probably a 30-40-30. Have the left button right aligned, center button center aligned, and right button left aligned. This should fix the responsive issue as well.

The responsive issue is caused by how narrow the columns used are. Implementing the suggestion above should fix this issue. The buttons on the homepage are from a widget so if you’d like, you can use the same method.

Changing the hover to a solid color would require custom CSS. To change the background color of all BB buttons site wide, you can use the CSS snippet below.

.fl-builder-content .fl-node-content.fl-module-content a.fl-button:hover {
  background: #FFF;
  border-color: #FFF;
}

Hope this helps!

Ben