How to force buttons into a row?

Support
#1

I would like to force buttons into a row.
I tried this:

$el .x-button {float:left;
display: block;}

Any other ideas?

#2

Hey @Ben,

Out of the box, Button elements will line up in a row like this.

Please check your Container’s Flex Layout is set to Row.

Hope that helps.

#3

The problem is, I have two columns side by side, and several elements within each column that need to be Flex layout: column to work correctly.

What I need is a way to override this for specific elements within a column. This is a bit like asking the ability to have row > column > row. Alternatively, I guess I can just use a single “text” element with two links.

Here is the page I am talking about http://18.209.43.156/home

#4

Hello There,

If you want to force the buttons using a custom css, you will have to use this code in the element css containing the button:

$el .x-button {
  float: none;
  display: block !important;
}

And if you have added the css in the button element settings > Customize tab, you have to use something like this:

$el{
  float: none;
  display: block !important;
}

And please do not forget to set a maximum width of your button especially if you do not want to have a block button:

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.