Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 10, 2021 at 8:15 am #1299287
    Dzimnikov

    Hey gang, have a small problem that I’m guessing CSS could fix quickly. I’m using maxbuttons plugin on my site, and their buttons won’t center properly on mobile. Is there a way to fix it with CSS.

    Here is an example: https://www.highereducationfest.com/musical-lineup/

    The green button, which i have throughout the site, wont center properly on mobile, neither do the day of the week buttons.

    Can you please help?

    Cheers,
    -Daniel

    May 11, 2021 at 5:33 am #1299541
    Rikard

    Hey Dzimnikov,

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

    @media only screen and (min-width: 0px) and (max-width: 480px) {
.mb-center.maxbutton-4-center .maxbutton-4-container.mb-container {
    width: 100% !important;
}
}

    Best regards,
    Rikard

    September 25, 2021 at 11:31 pm #1322308
    Dzimnikov

    Hey, thank you so much for getting back to me. Here is the website again: https://www.highereducationfest.com/home-new/

    So I used the width: 100% code. I have it in my customize css area. That code works for maxbuttons 1,2,3 (all on musical lineup page) and on a brand new button I just made, and maxbuttons 6, 7 (new homepage link above and volunteer pages respectively)

    For some reason, max buttons 4,5 (both on the new home page link above) are not working properly at all on mobile, though they have literally the same exact setting as all the other buttons. Maxbutton 4 is shifted to the right… while Maxbutton 5 is a complete mess with text sticking out of the button.

    Am I missing something obvious here? Its driving me a little crazy because there is nothing obvious and I’ve scraped almost the entire site lol

    September 26, 2021 at 7:54 am #1322334
    Guenni007

    try this in your quick css :

    .mb-center .mb-container {
  margin: 0 !important
}

.mb-center a {
  width: 100% !important;
  display: inline-table !important;
  padding: 0 10px;
}

/*** just a bit more space ***/
.mb-center a .mb-text {
  line-height: 1.2em !important
}

    if you come into conflict with desktop look – just wrap the code above in a media query:

    @media only screen and (max-width:767px) {
   /*** code goes here  ***/
}
    September 27, 2021 at 8:34 am #1322420
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did you have any luck with that CSS @Dzimnikov?

    Best regards,
    Rikard

    September 27, 2021 at 10:11 pm #1322545
    Dzimnikov

    You are a brilliant man!!! Thank you so much, worked perfectly!!!

    September 28, 2021 at 12:22 pm #1322621
    Mike

    Hi,
    Glad Guenni007 could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Centering buttons from a plugin’ is closed to new replies.