How can I get 3 buttons to display side-by-side on mobile?

Site URL: https://whoamitv.tv/music

The images below are how my buttons align on both mobile and desktop. The buttons sit next to each other on desktop but stack on mobile. Is there a way I can keep the buttons next to each other even while on mobile?

Add to Design > Custom CSS

/* 3 buttons side by side */
@media screen and (max-width:767px) {
div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col {
    width: calc(~"33.3333% - 20px") !important;
    float: left !important;
    margin: 10px !important;
}
div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col * {
    font-size: 12px;
}
div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col .button-block {
    padding: 0 !important;
}
}

6 hours ago, tuanphan said:

Add to Design > Custom CSS

/* 3 buttons side by side */
@media screen and (max-width:767px) {
div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col {
    width: calc(~"33.3333% - 20px") !important;
    float: left !important;
    margin: 10px !important;
}
div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col * {
    font-size: 12px;
}
div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col .button-block {
    padding: 0 !important;
}
}

 

Thank you so much!

Do you have any idea how I could fix the sizing issue on the buttons so that they appear to be the same size?

On 9/1/2021 at 10:40 PM, chadhinsonjr said:

Thank you so much!

Do you have any idea how I could fix the sizing issue on the buttons so that they appear to be the same size?

You mean make button 3 same as 1&2

or make button 1&2 same as button 3?

I would like 3 to be the same as 1 and 2. 

Hi,

It looks like you fixed this?

Hey, I was wondering if it is possible to do this same thing with 3-4 elements. If you see the picture below there is a text block, a picture block, a button block, and a space block to offset the image. Is there a way to have this displayed exactly like this on mobile?  the url is https://creativebelievers.com/staymotivated

On 10/19/2021 at 3:42 AM, chadhinsonjr said:

Hey, I was wondering if it is possible to do this same thing with 3-4 elements. If you see the picture below there is a text block, a picture block, a button block, and a space block to offset the image. Is there a way to have this displayed exactly like this on mobile?  the url is https://creativebelievers.com/staymotivated

You mean make mobile layout same as, with 2 columns: left is text/button - right is image?

11 hours ago, tuanphan said:

You mean make mobile layout same as, with 2 columns: left is text/button - right is image?

Yes exactly 

@tuanphan I am trying to do this same thing having three buttons appear side by side on mobile instead of stacked. I updated your code above with my page section ID but to no avail.

Can you take a look? Thank you as always!

https://tuna-avocado-cgfe.squarespace.com/test-home

pw: test

/* 3 buttons side by side */
@media screen and (max-width:767px) {
div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col {
    width: calc(~"33.3333% - 20px") !important;
    float: center !important;
    margin: 10px !important;
}
div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col * {
    font-size: 12px;
}
div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col .button-block {
    padding: 0 !important;
}
}

On 10/21/2021 at 7:57 AM, chadhinsonjr said:

Yes exactly 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634777764830_13518+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

On 10/22/2021 at 1:29 AM, unavolta said:

@tuanphan I am trying to do this same thing having three buttons appear side by side on mobile instead of stacked. I updated your code above with my page section ID but to no avail.

Can you take a look? Thank you as always!

https://tuna-avocado-cgfe.squarespace.com/test-home

pw: test

 

 

 

/* 3 buttons side by side */
@media screen and (max-width:767px) {
div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col {
    width: calc(~"33.3333% - 20px") !important;
    float: center !important;
    margin: 10px !important;
}
div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col * {
    font-size: 12px;
}
div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col .button-block {
    padding: 0 !important;
}
}

Add to Design > Custom CSS

/* Mobile-Buttons side by side */
@media screen and (max-width:767px) {
div#block-9c340f7969e60c1fbf6c+.row>.span-2 {
    width: 33.3333% !important;
    float: left !important;
}
div#block-9c340f7969e60c1fbf6c+.row>.span-10 {
    width: 66.6667% !important;
    float: left !important;
}
div#block-9c340f7969e60c1fbf6c+.row>.span-10>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#block-9c340f7969e60c1fbf6c+.row .button-block a {
    padding: 10px 15px;
}
div#block-9c340f7969e60c1fbf6c+.row .button-block {
    padding: 0 !important;
}
}