Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 29, 2022 at 3:41 pm #1353343
    amyteslin

    Hi,

    Can you tell me why on mobile, a row of buttons do not align centrally?

    You can see the blue buttons on the link below

    May 29, 2022 at 7:07 pm #1353352
    Rikard

    Hey amyteslin,

    I’m not sure which buttons you are referring to, could you post a screenshot of the problem please?

    Best regards,
    Rikard

    May 29, 2022 at 9:37 pm #1353365
    amyteslin

    HI Rikard,

    These buttons do not align, as you can see. This happens each time there is a button row.
    Screenshot-2022-05-29-at-20-36-10
    Thanks

    Amy

    May 29, 2022 at 10:06 pm #1353367
    Mike

    Hi,
    Thanks for the screenshot but I’m not seeing this on my Android device (360px) or in Chrome Dev Tools mobile emulation 375px – 425px
    2022-05-29_004.jpg
    what screen resolution and device are you seeing this at?

    Best regards,
    Mike

    May 29, 2022 at 10:13 pm #1353368
    amyteslin
    This reply has been marked as private.
    May 29, 2022 at 10:49 pm #1353370
    Mike

    Hi,
    Thanks for the feedback, I don’t have an iPhone but I do see that the first button that is not in the button-row doesn’t have the left & right 3px margin that the button-row has, try adding this css for the first button:

    .avia-button-wrap.avia-builder-el-12 > .avia-button {
	margin: 3px;
}

    Please note that testing with Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
    Please also try this.

    Best regards,
    Mike

    May 29, 2022 at 10:54 pm #1353373
    amyteslin

    Ok, I can try that but that doesn’t cover the other buttons on the other pages such as this one:

    Membership

    CE299305-3-E50-41-B2-9-CA8-E44-D2-CC91-FCC

    May 29, 2022 at 11:51 pm #1353379
    Mike

    Hi,
    True this button-row has the correct/same margins for both buttons
    2022-05-29_005.jpg
    I’m not sure why your iPhone is doing this, does it also occur in landscape mode?
    Try removing the HR before the button-row, perhaps that has something to do with it?

    Best regards,
    Mike

    May 30, 2022 at 12:02 am #1353380
    amyteslin
    This reply has been marked as private.
    May 30, 2022 at 4:31 am #1353400
    Nikko

    Hi amyteslin,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width: 767px) {
  #top .avia-buttonrow-wrap .avia-button {
    display: block;
    max-width: 280px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

    Hope it helps.

    Best regards,
    Nikko

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