Forum Discussion

MikeTamoush's avatar
MikeTamoush
Qrew Commander
12 months ago

Have Vibrant Colors nevr worked on mobile?

I've always customized my own button shapes, sizes and colors. Recently, was using the vibrant class. I noticed these colors do not show up on mobile. All vibrant colors show up as gray on mobile. Has it always been this way, or is it a new bug?



------------------------------
Mike Tamoush
------------------------------

4 Replies

  • @Mike Tamoush It's been that way.

    I have a course called The Button Masterclass where I compared how buttons display on desktop vs mobile (app, safari, and chrome) based on the different ways you can display a button.

    What you are describing would be the orange button in this image which uses the Vibrant Alert class.

    Mobile does not have the same style sheet as desktop so the Vibrant classes are not loaded.



    ------------------------------
    Quick Base Junkie
    Sharon Faust
    https://quickbasejunkie.com
    ------------------------------
    • MikeTamoush's avatar
      MikeTamoush
      Qrew Commander

      Gotcha thanks! So what are you using in the black button then, for it to show up as black? Or is that something I can learn by taking the Button Masterclass?

      Also, I'm sure you already know this, but for others: If you use formula rich text style, and use width: 100%, the button will automatically span the full width on mobile. However, it also will span the full column width on desktop....so somewhat helpful if you have a specific mobile form. 



      ------------------------------
      Mike Tamoush
      ------------------------------
      • Quick_BaseJunki's avatar
        Quick_BaseJunki
        Qrew Captain

        @Mike Tamoush Absolutely you'll learn this and SO much more about buttons in The Button Masterclass.

        That's also a great tip for the 100% width. 

        Here is the rich text formula for that black button. Basically, it uses the Vibrant class but then layers style elements for the color, shape, etc on top.

        var text STYLE =
        "background: black;" &
        "border-radius: 20px;" &
        "white-space: nowrap;";

        var text URL = "https://quickbasejunkie.com";
        var text LABEL = "Visit Quick Base Junkie";

        "<a class='Vibrant SaveBeforeNavigating' style='" & $STYLE & "' href='" & $URL & "'>" & $LABEL & "</a>"



        ------------------------------
        Quick Base Junkie
        Sharon Faust
        https://quickbasejunkie.com
        ------------------------------