Controlling width of inline Call to Action in a 1 column row

Beaver Builder
1

I have an inline Call to Action in a single column row. The text and button are justified across the fixed width. What’s the best/easiest way to move the text and button closer together so they are centered in the row without just playing with left and right margins?

Thanks!

2

Hey Preston,

Can you share the URL of the page in question so we can take a look?

Ben

3

[Content Hidden]

4

Hi Preston,

The idea behind the inline is that it has this style. If you want the text/button to be closer to together you will probably want to try the Stacked layout instead.

Another way to get them closer would be to add a three column row to your page. Then place the Call to Action into the middle column.

CloudApp

You may want to play with the column widths.

Thanks,
Danny

5

Thanks, Danny. Yes, the three column row trick was what I used initially. Was just hoping there was a more elegant way to do it. The dummy or empty columns create excessive spacing above and below the Call to Action when everything is arranged vertically in the mobile view.

I guess I’ll stick with that.

6

Hey Preston,

You can get rid of that spacing by setting the left and right modules’ margins to 0. I can also see you’re placing a Text Editor module inside each column with a white dot. You can remove that as well.

Ben

7

Thanks Ben!

8

No worries at all, Preston! Glad we could help. :slight_smile:

Ben