Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #383240

    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!

    #383858

    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

    #383919

    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!

    #384588

    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

    #385621
    This reply has been marked as private.
    #386496

    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

    #386499

    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

    #386512

    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%);
    }
    }
    #387546

    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

    #387547

    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

    #387832

    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.

    #387843

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

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