Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 10, 2016 at 1:08 am #562537
    keeslamper

    Hi,

    On image.serv10.wpbouwlocatie.nl I’m using to fullwidth buttons. Beside each other. But on mobile view they are under each other. Is is possible to resize them on mobile and hold them on one line?

    Regards,
    Kees

    January 11, 2016 at 4:55 pm #563324
    Andy

    Hi keeslamper!

    use this code in Quick CSS field:

    .flex_column.av_one_half.flex_column_div.first.avia-builder-el-2.el_after_av_layerslider.el_before_av_one_half.avia-builder-el-first {
width: 45% !important;
}
.flex_column.av_one_half.flex_column_div.avia-builder-el-4.el_after_av_one_half.el_before_av_hr {
width: 45%;
margin-left: 10px !important;
}

    and adjust as needed.

    Best regards,
    Andy

    January 11, 2016 at 5:01 pm #563332
    keeslamper

    Is this only for mobile Andy?

    January 11, 2016 at 5:04 pm #563336
    Andy

    Hey!

    oh sorry, forget to add some media queries: 

    @media only screen and (max-width: 736px) {
.flex_column.av_one_half.flex_column_div.first.avia-builder-el-2.el_after_av_layerslider.el_before_av_one_half.avia-builder-el-first {
width: 45% !important;
}
.flex_column.av_one_half.flex_column_div.avia-builder-el-4.el_after_av_one_half.el_before_av_hr {
width: 45%;
margin-left: 10px !important;
}
}

    Best regards,
    Andy

    • This reply was modified 8 years, 11 months ago by Andy.
    January 11, 2016 at 5:06 pm #563338
    keeslamper

    Great thanks! I’ll test it immediately.

    January 11, 2016 at 5:27 pm #563368
    keeslamper

    Andy,

    It’s only working for left button.

    http://image.serv10.wpbouwlocatie.nl

    January 12, 2016 at 1:35 pm #563864
    Andy

    Hi!

    then you might need to add an !important for the second width value (second button) as well: 

    @media only screen and (max-width: 736px) {
.flex_column.av_one_half.flex_column_div.first.avia-builder-el-2.el_after_av_layerslider.el_before_av_one_half.avia-builder-el-first {
width: 45% !important;
}
.flex_column.av_one_half.flex_column_div.avia-builder-el-4.el_after_av_one_half.el_before_av_hr {
width: 45% !important;
margin-left: 10px !important;
}
}

    Let me know if this helps.

    Cheers!
    Andy

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