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.