Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #231756

    8feathers
    Participant

    Hello Themeco Staff.

    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!

    #232005

    Darshana
    Moderator

    Hi there,

    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!

    #232016

    8feathers
    Participant
    This reply has been marked as private.
    #232327

    Friech
    Moderator

    Hi There,

    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!

    #232368

    8feathers
    Participant

    Thank you very much! 🙂 Worked perfectly

    #232621

    Friech
    Moderator

    Glad we could help, Cheers!

    #241515

    shah81
    Participant

    Hi,

    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.

    Center Button

    #241566

    John Ezra
    Member

    Hi there,

    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!

    #638075

    WPH2o
    Participant

    What is the CSS to center ALL buttons on the site?

    #638319

    Lely
    Moderator

    Hello There,

    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.