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

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?


Hey Preston,

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


[Content Hidden]

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.


You may want to play with the column widths.


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.

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.


Thanks Ben!

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