Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 10, 2015 at 2:10 am #485003
    Tate

    Hello,
    I am hoping someone can help me with this! I am having a problem with two buttons aligning. If I use 4 columns with only buttons in the two inner columns, they align properly on desktop (mac) but when I view on iPad or iPhone they are out of alignment by quite a bit.

    I read a solution here to use 2 1/2 columns instead of 4 so I have done that only on the front page as a test. They still do not line up on a mobile device. I really need these to align on both desktop and mobile! Any help would be greatly appreciated. It is currently a demo site but is expected to go live soon.

    thanks

    August 10, 2015 at 1:22 pm #485268
    Andy

    Hey Karen!

    about which buttons are you talking about? the “PLAY” and “READ” button? seems to be aligned well on iPad for me. Can you show us screenshots of how you want it to look like? use imgur.com or dropbox.

    Best regards,
    Andy

    August 10, 2015 at 6:39 pm #485555
    Tate

    Hi Andy,
    Thanks for responding. Yes, it is the play and read buttons. I have managed to get the alignment correct on the iPad but still having trouble with the mobile device. On the mobile I would like the two buttons to sit neatly under one another. This is what I anticipated it would do, but they don’t.
    I have attached a screenshot for you as they currently appear on the iPhone.

    August 11, 2015 at 8:35 am #485767
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
.avia-button.avia-position-right, .avia-button.avia-position-left {
float:none !important;
}
}

    Regards,
    Rikard

    August 11, 2015 at 7:18 pm #486128
    Tate

    Hi,
    I added the suggested quick css. Unfortunately it has had no effect. Any other suggestions would be greatly appreciated.

    Kind Regards

    August 12, 2015 at 3:42 am #486270
    Ismael

    Hey!

    Please use then hard refresh the page:

    @media only screen and (max-width: 767px) {
#av_section_1 .flex_column.av_one_half.flex_column_div.av-zero-column-padding.first.avia-builder-el-3.el_after_av_heading.el_before_av_one_half, #av_section_1 .flex_column.av_one_half.flex_column_div.av-zero-column-padding.avia-builder-el-5.el_after_av_one_half.avia-builder-el-last {
    float: left;
    width: 48% !important;
    clear: none;
}
}

    Best regards,
    Ismael

    August 12, 2015 at 7:06 pm #486738
    Tate

    That did the trick! I also added some padding to separate the two buttons slightly, as they blended together and looked like one button.
    Thanks so much for your help!

    Kind Regards

    August 13, 2015 at 8:31 am #487010
    Rikard

    Hi,

    Glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Buttons not aligning on mobile device or ipad’ is closed to new replies.