Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 21, 2015 at 6:24 pm #383240
    XTGlobal

    http://27c.d06.myftpupload.com/
    To get the buttons with the spacing we wanted we have one set to left align, the other to right. But when viewed on mobile, it looks really off. We want them to go to center align on mobile, but are having difficulties. Here’s what we have:

    @media only screen and (max-width: 767px) {
.avia-button {
text-align:center!important;
}}

    Help is appreciated. Thanks!

    January 22, 2015 at 6:24 pm #383858
    Elliott

    Hi XTGlobal!

    Add this to your custom CSS.

    @media only screen and (max-width: 767px) {
.home #av_section_1 .avia-button, .home #av_section_1 .avia-button-wrap {
  display: inline-block;
  float: none !important;
  left: 50%;
  position: relative;
  transform: translate(-50%);
}
}

    Cheers!
    Elliott

    January 22, 2015 at 7:17 pm #383919
    XTGlobal

    So this works on a desktop if you shrink the window, but when i viewed it on a phone the buttons were so far off to the right that you couldn’t click on them.

    and thank you for helping!

    January 23, 2015 at 7:56 pm #384588
    Elliott

    Hi!

    It seems to work fine on my end. Take a screenshot of what your seeing. What device and resolution are you using?

    Best regards,
    Elliott

    January 26, 2015 at 5:40 pm #385621
    XTGlobal
    This reply has been marked as private.
    January 27, 2015 at 6:41 pm #386496
    Elliott

    Hey!

    Hmm, maybe the CSS transform does not work on mobiles. Try changing it to this.

    @media only screen and (max-width: 767px) {
.home #av_section_1 .avia-button, .home #av_section_1 .avia-button-wrap {
  display: block;
position: relative;
  float: none !important;
  left: auto;
  position: relative;
}
}

    Cheers!
    Elliott

    January 27, 2015 at 6:44 pm #386499
    Andy

    Hi!

    it’s working fine for me on iPhone emulator as well as my android device. Is it fixed now? please also check on another smartphone.

    Regards,
    Andy

    January 27, 2015 at 6:58 pm #386512
    XTGlobal

    Ah ok, it’s not working because I tried to make it applicable to all pages, not just the home page (we have a top section like this on every main page). Here’s what I have:

    @media only screen and (max-width: 767px) {
 #av_section .avia-button,  #av_section .avia-button-wrap {
  display: inline-block;
  float: none !important;
  left: 50%;
  position: relative;
  transform: translate(-50%);
}
}
    January 29, 2015 at 7:23 am #387546
    Josue

    Hey!

    I’d suggest setting an unique ID to the Color Section and changing the code accordingly:

    @media only screen and (max-width: 767px) {
 #button_container .avia-button,  #button_container .avia-button-wrap {
  display: inline-block;
  float: none !important;
  left: 50%;
  position: relative;
  transform: translate(-50%);
}
}

    Cheers!
    Josue

    January 29, 2015 at 7:23 am #387547
    Josue

    Hey!

    I’d suggest setting an unique ID to the Color Section and changing the code accordingly:

    @media only screen and (max-width: 767px) {
 #button_container .avia-button,  #button_container .avia-button-wrap {
  display: inline-block;
  float: none !important;
  left: 50%;
  position: relative;
  transform: translate(-50%);
}
}

    Cheers!
    Josue

    January 29, 2015 at 5:57 pm #387832
    XTGlobal

    I added unique section ids but I don’t see how that comes into the CSS. What you put up there is the exact same as I had that doesn’t work… The 3 sections that’ll need this I just named 1, 2 and 3. Here’s what I have:

    @media only screen and (max-width: 767px) {
 #av_section_1 #av_section_2 #av_section_3 .avia-button, #av_section_1 #av_section_2 #av_section_3  .avia-button-wrap {
  display: inline-block;
  float: none !important;
  left: 50%;
  position: relative;
  transform: translate(-50%);
}
}

    I’m just trying to figure out how to assign the CSS to the correct properties; that’s the part that seems to be screwing everything up.

    January 29, 2015 at 6:06 pm #387843
    XTGlobal

    oh wait! nevermind i got it to work!
    Thank you for all of your help everyone :)

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Center Align Buttons on Mobile’ is closed to new replies.