Add a space between buttons in an Accordion element

Support
#1

Hi there,
I have added an Accordion element to a page and used the “Insert Shortcodes” option to add two buttons into the text section - “Learn More” and "Book Now’.

The following code was generated and inserted into the text box.
[x_button shape=“square” size=“regular” float=“none” title=“Learn More” target=“blank” info=“tooltip” info_place=“top” info_trigger=“hover” info_content=“Click here to find out more”]Learn More[/x_button]
[x_button shape=“square” size=“regular” float=“none” title=“Book Now” target=“blank” info=“tooltip” info_place=“top” info_trigger=“hover” info_content=“Click here to book”]Book Now[/x_button]

How do I add a margin or space between the two buttons? When the page loads, there is a space between the buttons but when you bring the cursor over the “Learn More” button, the space disappears (see screen shots attached).

I am new to this and haven’t been able to find a solution elsewhere.

Thanks!

#2

Hi,

You can add margin using inline style.

eg.

[x_button style="margin-right:40px;" shape="square" size="regular" float="none" title="Learn More" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click here to find out more"]Learn More[/x_button]

You may change margin-right:40px; to adjust the spacing.

Hope that helps.

#3

Thanks - it helped but the button still “moves”. I added the margin to the “Book Now” button but if the cursor hovers over the “Learn More” button, the “Book Now” button shifts towards the “Learn More” button.

Will PM you the domain details so that you can see.

#5

Hi again,

To fix the issue, just add the following code in your Customizer:

.x-accordion-inner:before, .x-accordion-inner:after {
    content: "";
    display: table;
    clear: both;
}
.x-accordion-inner .x-btn {
    float: left;
    margin-right: 10px;
}

Let us know how this goes!

#6

Thanks! It worked!

#7

Glad it worked.

Cheers!