Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 19, 2018 at 3:01 am #914099
    dmac

    Hi,

    Please help align these buttons so they stack or align one next to the other in mobile view buttons body

    February 19, 2018 at 5:02 am #914120
    Nikko

    Hey Danny,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:479px) {
  #top .avia-fullwidth-slider a.avia-slideshow-button.avia-button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    February 19, 2018 at 9:27 am #914167
    dmac

    Thank you for replying, but this did not work. It fixed another issue in the full-width slider buttons though. Not sure if there is a conflict. I am using this CSS Quick Code to center and spacing on desktop view:

    .home #av_section_3 .avia-builder-el-18.avia-button-wrap {
    float:right;
    }
    .home #av_section_3 .avia-builder-el-20.avia-button-wrap {
    float:left;
    margin-left:20px;
    }

    • This reply was modified 6 years, 10 months ago by dmac.
    February 19, 2018 at 2:38 pm #914261
    Nikko

    Hi,

    I see can you try to replace the code I gave you with this one:

    @media only screen and (max-width:479px) {
  #top .avia-fullwidth-slider a.avia-slideshow-button.avia-button {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

    Best regards,
    Nikko

    February 19, 2018 at 11:11 pm #914577
    dmac

    Hi,

    To clarify, the buttons I am trying to center on mobile is the avia-buttons in the body:

    avia-button avia-icon_select-no avia-color-custom avia-size-x-large avia-position-center

    February 20, 2018 at 4:27 am #914656
    Nikko

    Hi,

    Sorry, I didn’t look below, try using this css code:

    @media only screen and (max-width:479px) {
  #top .flex_column_table.av-equal-height-column-flextable.-flextable .avia-button-wrap.avia-button-center {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    February 20, 2018 at 4:29 am #914659
    dmac

    That worked, thanks!

    February 20, 2018 at 6:07 am #914701
    Rikard

    Hi,

    Great, glad you got it working and sorry for the problems. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 20, 2018 at 6:21 am #914705
    dmac

    Please close it, thanks again.

    February 20, 2018 at 6:26 am #914707
    Rikard

    Hi,

    Thanks for letting us know, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

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