Callout or Call to Action

Beaver Builder
1

Hi,
Is is possible to align the Callout button to the side of the text (similar to the inline option in the Call to Action module)? I was looking to include an icon in the text section (avail in the Callout module) but use it in a wide row, and the button looks silly sitting under the text when there is a ton of space to the right.
Thanks,
Jennifer

2

Hi Jennifer,

If I understand you correctly, do you mean something like this:

Cloudup

If so, to do this follow the instructions below:

  1. Add a custom class to your Call to Action module. So you do not effect any other CTA modules you may use.

For example:

my-inline-cta

  1. Once, you have added a custom class, save the changes.

  2. Then add the following CSS to either your child theme style.css file or Customizer > Code > CSS Code.

.my-inline-cta .fl-cta-text {
    float: left;
}
.my-inline-cta .fl-cta-button {
    float: right;
}

All the best,
Danny

3

Thanks, Danny! That’s it exactly, and that fix solved it. Only thing is that the button hugs the bottom of the row and when I play with the padding, margins, and/or alignment to bring it up into vertical alignment with the text, somehow the text moves up as well. (Like the button is chasing the text upwards.) Here’s one way I’m trying:

.my-inline-callout .fl-callout-text {
float: left;
}

.my-inline-callout .fl-callout-button {
float: right;
margin: 0px 15px 25px 0px;
}

Or alternately:

.my-inline-callout .fl-callout-button {
float: right;
vertical-align: middle !important;
}

4

Hi Jennifer,

Happy to hear that is what you were after. In regards to your button chasing your text (hehe), can you provide a link to the page in question so we can take a closer look, please.

All the best,
Danny

5

[Content Hidden]

6

Hi Jennifer,

Thank you for providing the link. If I understand you correctly, I believe the following CSS should hopefully, resolve you issue.

.my-inline-callout .fl-callout-button {
    padding-top: 0;
}

All the best,
Danny