Jump to content

Three buttons side by side on mobile

Recommended Posts

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?

Link to comment
  • Replies 3
  • Views 158
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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;
}}}

image.thumb.png.66efd17e4d7857abe7eb234d3d73519d.png

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.