Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #415792

    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/

    #415795

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

    #415798

    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, 8 months ago by tjswarbs78.
    #416227

    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

    #587856

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

    #588974

    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

    #673073

    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

    #674501

    Hi,

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

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

    Best regards,
    Josue

    #805608

    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?

    #805983

    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

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