Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 5, 2014 at 12:22 am #363337
    discotech

    Hi,

    I have two buttons that I would like to show up side by side on mobile devices. Here is a example page:

    http://www.discotech.me/test/

    When opening on mobile I’m trying to make the two buttons side by side rather than stacked on top of each other.

    This is the shortcode that I am using:

    [av_one_half][av_button label='Test button' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='grey' custom_bg='#444444' custom_font='#ffffff'][/av_one_half]
    [av_one_half first][av_button label='Test button' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='grey' custom_bg='#444444' custom_font='#ffffff'][/av_one_half]

    Thanks!

    December 5, 2014 at 9:15 pm #363835
    Elliott

    Hi discotech!

    The 1/2 columns will stack on top of each other on smaller screens. What you’ll want to do here is move them into a 1/1 column and set their alignment to left. This will have them display next to each other.

    Or if you want to keep using two columns then you can try dragging a codeblock element to your page and add this inside.

    <style type = "text/css">
@media only screen and (max-width: 479px) {
.flex_column.av_one_half {
    width: 49% !important;
}
}
</style>

    That will force them to stay in two columns when on smaller screens.

    Cheers!
    Elliott

    December 6, 2014 at 5:00 am #364014
    discotech

    Hi,

    How would I set it up in shortcode? I tried doign this:

    [av_one_full first]

    [av_button label='Click me' link='manually,http://' link_target='' size='small' position='left' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']

    [av_button label='Click me' link='manually,http://' link_target='' size='small' position='left' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']

    [/av_one_full]

    But it doesn’t work

    December 6, 2014 at 5:08 am #364015
    discotech

    Nevermind, figured it out thanks!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Side by side button on mobile’ is closed to new replies.