Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #363337

    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!

    #363835

    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

    #364014

    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

    #364015

    Nevermind, figured it out thanks!

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