Headline and button side by side

Is there a way to align a headline and a button side by side instead of stacked using the Flex Layout options? I can’t seem to get it to work.

Hi there,

Please add this code to the Element CSS of both elements:

$el {
  float: left !important;
}

Set the value of the element’s float attribute to left if you want it to be on the right and right to the other.

Hope this helps.

Thank you @Jade!

A few more tips for anyone else looking to do this:

Make sure that the enclosing row is set to Inner Container OFF, and that you set a max width to the Inner Container (using pixels) - or else the your headline and button will be on complete opposite sides of the screen instead of close to each other like you probably want them to be.

I would also make sure your headline is responsive using calc( ) in the font size so that they can still be side-by-side on mobile. Because of the floats it doesn’t look pretty at small screen sizes. The other options are to either duplicate the row and create one for mobile (not ideal), or set some custom classes and use media queries.

Thank you for the tips. Have a nice day! :slight_smile:

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