Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 21, 2015 at 10:31 pm #415792
    vastaffer

    Hello! Love how you have some great new demo themes – I noticed that they have two buttons side by side.

    I can’t figure out how to do it, every time I add a button in the same column it goes to the next line.

    How can I get to buttons side by side?

    Example:

    [ OUR TEAM ] [ OUR SERVICES ]

    Check out how I have it now (one in each column, and way too far apart) http://vastaffer.com/

    March 21, 2015 at 10:50 pm #415795
    Overhaulics

    Try putting the buttons in columns, split the are you want the buttons in half and center the buttons in each of those.

    March 21, 2015 at 10:58 pm #415798
    tjswarbs78

    Remove the two columns that are there and use a code block with the following

    <div class="avia-button-wrap avia-button-center avia-builder-el-0 avia-builder-el-no-sibling " style="display:inline;"><a href="URL HERE" class="avia-button avia-icon_select-no avia-color-theme-color avia-size-large avia-position-center><span class="avia_iconbox_title">BUTTON NAME</span></a></div>
    <div class="avia-button-wrap avia-button-center avia-builder-el-0 avia-builder-el-no-sibling " style="display:inline;"><a href="URL HERE" class="avia-button avia-icon_select-no avia-color-theme-color avia-size-large avia-position-center><span class="avia_iconbox_title">BUTTON NAME</span></a></div>

    Add some CCS to style as you wish and center

    I used this way on a site to center two buttons in the full width slider

    • This reply was modified 9 years, 7 months ago by tjswarbs78.
    March 23, 2015 at 7:26 am #416227
    Rikard

    Hey vastaffer!

    Did you try out the above suggestions and did you have any luck with them? If not, please let us know and we’ll help you out further.

    Regards,
    Rikard

    February 23, 2016 at 5:55 pm #587856
    jochemnooyen

    Hi, I did this, but now the buttons are lined out on the left instead of the centre.

    February 25, 2016 at 12:10 pm #588974
    Josue

    Hey!

    Use something like this instead:

    <div class="centered-buttons">
[av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class=''][av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class='']
</div>

    And add this to Quick CSS:

    .centered-buttons .avia-button-wrap {
    display: inline-block;
    margin: 0 5px;
}
.centered-buttons{
    text-align: center;
}

    Cheers!
    Josue

    August 16, 2016 at 9:14 am #673073
    CelebrationEvents

    I tried also to align 2 centered buttons in one row. but can’t get it to work;
    This is what i figured out:

    #top .gd-center-buttons .avia-button-wrap {
    display: inline-block;
    margin: 0 5px;
    text-align: center; }

    see the last paragraf on http://www.celebrationevents.nl/dj-huren/bruiloft-dj/
    The buttons are aligned next to each other but not centered in the content block.

    Please let me know how to fix this

    August 19, 2016 at 6:05 am #674501
    Josue

    Hi,

    text-align: center must be applied to the container:

    .gd-center-buttons {
    text-align: center;
}

    Best regards,
    Josue

    June 8, 2017 at 3:33 pm #805608
    rkb317

    I’m having a similar issue and I used this:
    <div class=”centered-buttons”>
    [av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class=''][av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class='']
    </div>
    And add this to Quick CSS:

    .centered-buttons .avia-button-wrap {
    display: inline-block;
    margin: 0 5px;
    }
    .centered-buttons{
    text-align: center;
    }

    and it worked perfect! except now, EVERY centered button that’s on it’s own is aligned to the left – is there a way to just have the two buttons lined up using this code and it not effect the other singular buttons?

    June 9, 2017 at 10:34 am #805983
    Rikard

    Hi @rkb317,

    Could you post a link to the page where we can see the items in question that you want to apply your CSS to please?

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.