[captsalamanderParticipant]

Hi,

I’ve searched the forum but can’t find this topic:

How can I change the position/justification of the callout button without also changing the justification of the text?

I would like the text justified on one side of the callout box with the button justified either in the center or the opposite side.

Here is my site: http://sigmastatus.com

The buttons in question are in the third content band.

Thanks!

[ChristopherModerator]

Hi there,

To center the button add the following CSS code under Customize -> Custom -> CSS:

.x-callout a.x-btn {
margin: 0 auto;
display: table;
}

Or to align button to right side add:

.x-callout a.x-btn {
float: right;
}

Hope it helps.

[captsalamanderParticipant]

It works, thanks!

Now the only issue is when using the right float the button margin (between the button and the bottom of the callout box) disappears (the margin is fine with the normal left alignment and with the centered alignment).

[captsalamanderParticipant]

A couple more connected question:

1. How can I use this for one page or button and not globally?

2. After I deleted the custom CSS, the button stays centered, even after saving changes and emptying my cache (instead of reverting back to the ‘left’ designation in the callout shortcode).

3. Can this code be entered in the Custom Body section in the page settings bar in the editor?

Thanks!

[Kosher KMember]

Hi There,

You can try adding this code in CSS to fix the issue with float right,

.x-callout {
 overflow: hidden;
}

This CSS selector .x-callout a.x-btn is a global selector, which affect all the call out button on your site, if you don’t have to apply global CSS, you can assign a class to your Call Out BOx and use that class instead of x-callout

e.g.
Assign a class my-custom-class to one call out box. css would be something like below,

.my-custom-class a.x-btn {
 float: right;
}

Hope that helps, Have a great day

[captsalamanderParticipant]

Great! Thanks for your help.

[John EzraMember]

You’re welcome! Write us back anytime!

[Author]

Posts