# Get all the buttons to line up

**URL:** <https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810>\
**Category:** Beaver Builder\
**Created:** [December 3, 2015, 7:20am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810 "2015-12-03T07:20:19Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![newhuman](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/n/dec6dc/32.png) [@newhuman](https://community.wpbeaverbuilder.com/u/newhuman)\
**Post date:** [December 3, 2015, 7:20am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/1 "2015-12-03T07:20:19Z")

</div>

I Am attempting to make a grid layout of sorts, 5 across, image, text, and a button.  
I can get everything to line up using different rows  
[https://www.dropbox.com/s/h907q766xkl4ewc/New\_Human\_Hub\_\_New\_Human\_15.11.19\_1552.png](https://www.dropbox.com/s/h907q766xkl4ewc/New_Human_Hub__New_Human_15.11.19_1552.png)  
but then when the page gets smaller, ie mobile etc…, the buttons stack up together underneath.

Or if they are all in one column with the CTA module or similar and screen gets smaller it looks like junk and the button are still not lined up.  
[https://www.dropbox.com/s/pfi2zn3w6gse2ox/New\_Human\_Hub\_\_New\_Human\_15.11.19\_1554.png?dl=0](https://www.dropbox.com/s/pfi2zn3w6gse2ox/New_Human_Hub__New_Human_15.11.19_1554.png?dl=0)

not too sure where to go from here

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [December 3, 2015, 7:37am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/2 "2015-12-03T07:37:01Z")

</div>

Hey Joda,

That would be caused by how the space for each column is already small, and it just gets smaller as the viewport does. As you notice on your second screenshot, the body texts are going over 4 lines instead of 2, headings going 2 lines instead of 1, button text going over 3 lines instead of 1, that is what breaks the layout.

Try using wider columns, maybe do 2 rows, 1 3 column and the other a 2 column row so your content have enough space.

Ben

---

<div class="post-metadata">

**Author:** ![newhuman](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/n/dec6dc/32.png) [@newhuman](https://community.wpbeaverbuilder.com/u/newhuman)\
**Post date:** [December 3, 2015, 8:26am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/3 "2015-12-03T08:26:29Z")

</div>

OK I get that point, is there an easy way to keep the buttons in a line without having to add lines in the text area? witch is not very precise.  
whole page: [https://www.dropbox.com/s/hfrr7rn8cpusmh0/NH%20Hub%20whole.png?dl=0](https://www.dropbox.com/s/hfrr7rn8cpusmh0/NH%20Hub%20whole.png?dl=0)  
I tried putting them all in a row, but that didn’t go so well on mobile.  
[http://take.ms/7PSCP](http://take.ms/7PSCP)

thoughts?

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [December 3, 2015, 8:44am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/4 "2015-12-03T08:44:03Z")

</div>

Hey Joda,

Are you using the Callout module? Or are those separate modules each? Or would it be possible for you to share the URL of the site so we may take a look?

Ben

---

<div class="post-metadata">

**Author:** ![newhuman](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/n/dec6dc/32.png) [@newhuman](https://community.wpbeaverbuilder.com/u/newhuman)\
**Post date:** [December 3, 2015, 9:01am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/5 "2015-12-03T09:01:07Z")

</div>

[Content Hidden]

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [December 3, 2015, 9:06am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/6 "2015-12-03T09:06:04Z")

</div>

Hey Joda,

Should be possible with custom CSS. I’d suggest using Callouts instead, as it would be easier to style. You can simply add a class to the row where you want the buttons to align, e.g., `align-ctas`, then use the CSS snippet below.

```auto
.align-ctas .fl-callout-button {
  position: absolute;
  bottom: 0px;
} 

```

Then play around with the padding/margin of the row to fix spacing issues. 🙂

Ben

---

<div class="post-metadata">

**Author:** ![newhuman](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/n/dec6dc/32.png) [@newhuman](https://community.wpbeaverbuilder.com/u/newhuman)\
**Post date:** [December 3, 2015, 10:34am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/7 "2015-12-03T10:34:02Z")

</div>

Awesome, just need to center with in the column.

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [December 3, 2015, 11:24am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/8 "2015-12-03T11:24:16Z")

</div>

Hey Joda,

This is the only way that I know of to achieve that. You’re gonna need to assign the class to the row this time, and not the module. And play around with the columns bottom padding/margin, instead of the row. 🙂

```auto
@media (min-width: 768px) {
  .align-ctas .fl-col {
    position: relative;
  }
  .align-ctas .fl-callout-button {
    position: absolute;
    bottom: 0px;
    width: 200px; /* Change to whatever width you like for your buttons */
    left: 50%;
    margin-left: -100px; /* Must be 50% of the width you set above */
  }
}

```

Edit: I’ve placed it inside a media query so it doesn’t apply to mobile.

Ben

---

<div class="post-metadata">

**Author:** ![daveporter](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/daveporter/32/106_2.png) [@daveporter](https://community.wpbeaverbuilder.com/u/daveporter)\
**Post date:** [April 15, 2016, 5:40pm UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/9 "2016-04-15T17:40:00Z")

</div>

Hi Ben,

I’ve attempted to do this, and having some success.  
The only problem I have though is that the buttons are covering some of the content above them.  
Any thoughts?  
See example here:

[http://irwinhunter.com.au/](http://irwinhunter.com.au/)  
(a row of two columns and a row of three columns both examples)

TIA, Dave

ps, I have made a ‘sort of’ solution by adding a no-breaking space inside a paragraph on the longest column (in each example) so the button is pushed down.

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [April 18, 2016, 10:18am UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/10 "2016-04-18T10:18:59Z")

</div>

Hey Dave,

Try adding the snippet below inside the media query above and see if it helps.

```auto
.align-ctas .fl-callout-text {
  margin-bottom: 30px;
}

```

Feel free to adjust the value.

Ben

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:20pm UTC](https://community.wpbeaverbuilder.com/t/get-all-the-buttons-to-line-up/5810/11 "2019-04-27T22:20:18Z")

</div>