How to align two buttons next to each other?

  • Hi,

    I have two the code for two buttons but I can’t make them align horizontally on the same line.

    Can anyone suggest what I need to add, please.

    Here is what I have:

    <div class=”wp-block-button is-style-outline”>Get a free sample</div>

    <div class=”wp-block-button is-style-squared”>REQUEST A CALL</div>

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • lisa

    (@contentiskey)

    since buttons are often block elements which use the full width of the screen—setting them up “side by side” is not a natural thing.

    Try something like this:
    -insert a column block with 2 columns
    -add 1 button block in each of the 2 columns

    Thread Starter marieteather

    (@marieteather)

    Thank you!

    Ok, I am getting closer…

    I got the two buttons in two columns. Now I need to adjust the alignment but don’t see where there is.

    I need the text in the left column ‘Get A Free sample’ to be left aligned to the left margin (like all the text on my page)

    I need the Request a Call button to be center aligned on the page.

    Could you advise where to go for that please?
    Thanks

    lisa

    (@contentiskey)

    there probably is not a setting for button alignment.
    you might be able to create a custom CSS class to impact the alignment of the buttons.
    might take a bit of experimentation
    you might need different alignment for large and small devices
    the columns are set up using flex box
    there are resources available if you want to learn how to manage.
    one resource I use is css-tricks.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to align two buttons next to each other?’ is closed to new replies.