Here is my second attempt to solve this problem, since I did not receive support on my first request.
I don’t understand why, because I put my question into an existing topic which matches EXACTLY with my issue. I think it is more efficient to add to existing, matching threads instead of opening a new one each time. Don’t get me wrong, we Germans tend to write very directly, not being unfriendly here 😉

I think my questions are quite simple and easy to solve, but not for me 😉

1. I really can’t center align buttons and I have been trying for about 6 hours now. I added the “center-text” class to the column and it still shows up on the left side. I tried applying the “center-text” class also to the content band, the button, the visibility attribute and the container but nothing seems to work. I did it in each possible combination and also tried applying it only to a single one (only container etc.).

I just want to simply align the button in the center of the page.

Currently I added it too often I guess, but I tried each combination and it won’t work. I am probably missing something very simple..?

[vc_row bg_color=”#272727″ bg_image=”685″ border=”none” padding_top=”18px” padding_bottom=”18px” inner_container=”true” class=”center-text”][vc_column fade_animation=”in” fade_animation_offset=”45px” class=”center-text”][visibility type=”visible-phone” class=”center-text”][container][button shape=”square” size=”regular” float=”none” info=”none” info_place=”top” info_trigger=”hover” href=”http://www.start-one.de/support/” circle=”true”]Jetzt Anfragen[/button][/container][/visibility][visibility type=”hidden-phone” class=”center-text”][container][button shape=”square” size=”jumbo” float=”none” info=”none” info_place=”top” info_trigger=”hover” href=”http://www.start-one.de/support/” circle=”true”]Jetzt Anfragen[/button][/container][/visibility][/vc_column][/vc_row]

2. On mobile visibility the marketing circle is bigger than the button and it doesn’t look good anymore, do you have any hints on that?

3. On mobile the button text is aligned in one row, but on display visibility the text is above and under (I would have expected, that it would be the other way around, since there is more space on desktop). Can you explain how to have it aligned in one row for both visibilities?

I would be very thankful if you can help me with this. It’s such a small issue driving me crazy 🙁
Thanks and keep up the good work!

Thanks for writing in! Could you please provide us with a link your page that you have setup? So that we can take a closer look and assist you with a tailored solution.

Thanks!

You can add this under Custom > CSS in the Customizer.

.x-btn-circle-wrap .x-btn {white-space: nowrap;width: 100%;}
#x-content-band-25 > .x-container > .x-column {width: 100%;}

Hope it helps, Cheers!

I also got this issue. But, I don’t found any solution from this thread. Is this code below could center the button mentioned above.

#x-content-band-25 > .x-container > .x-column {width: 100%;}

Because I got this problem and to solve it. Thanks.

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.page-id-187 #x-content-band-1 a.x-btn.x-btn-rounded.x-btn-jumbo {
    margin: 0 auto;
    display: block;
    width: 370px;
}

@media (max-width:399px) {
    .page-id-187 #x-content-band-1 a.x-btn.x-btn-rounded.x-btn-jumbo {
    width: 300px;
    }
}

Hope this helps – thanks!

To center the buttons, you can add class center-text to the container/column/row that contains the button.

If this doesn’t help, please provide your page URL so we can see your setup.