Three buttons side by side on mobile

Site URL: https://www.launchwiththekings.com/live#pricing-all-tiers

On desktop, I have three buttons side by side. But on mobile, the three buttons are stacked on each other. My goal is to have the same look on mobile that I have on desktop currently.

I tried to fix it with this code:

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1648669314242_338177, #block-yui_3_17_2_1_1648669314242_336197, #block-yui_3_17_2_1_1648669314242_318802{
    width: 33% !important;
    float: left !important;
  padding: 2px !important;
  }}

Any thoughts on what I'm doing wrong?

Hi. You mean 6 buttons on Pricing section?

Yes! I want a row of three white buttons, and then another row of three green buttons. Any thoughts?

3 hours ago, speedyboy said:

Yes! I want a row of three white buttons, and then another row of three green buttons. Any thoughts?

First, remove this CSS code

@media screen and (max-width: 640px) {
    #block-yui_3_17_2_1_1648669314242_338177,#block-yui_3_17_2_1_1648669314242_336197,#block-yui_3_17_2_1_1648669314242_318802 {
        width:33% !important;
        float: left !important;
        padding: 2px !important
    }
}

Next, add this new CSS code

/* Mobile Pricing buttons */
@media screen and (max-width:767px) {
/* top 3 buttons */
div#block-yui_3_17_2_1_1648669314242_322393+.row {
.span-3:nth-child(n+2) {
    width: calc(~"33.333% - 20px") !important;
    float: left !important;
    margin-left: 10px;
    margin-right: 10px;
}
.button-block {
    padding: 0;
}
.button-block a {
    font-size: 14px;
}}
/* bottom 3 buttons */
div#block-yui_3_17_2_1_1648773516347_163496+.row {
.span-3:nth-child(n+2) {
    width: calc(~"33.3333% - 20px") !important;
    float: left !important;
    margin-left: 10px;
    margin-right: 10px;
}
.span-3 .button-block {
    padding: 0 !important;
}
.span-3 .button-block a {
    font-size: 12px;
}}}