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 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.
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 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
------------------------------
