Side by side buttons for mobile and desktop

Site URL: https://www.diabeticexchangeusa.com/

How do I get the "How It Works" button and "Sell Supplies" button closer together (without shrinking the image beneath) and how do I get them to not stack on mobile.

You can try this solution in custom css

#block-yui_3_17_2_1_1601758406282_13090 [class*=sqs-block-button-container] {
  text-align: right;
}
#block-yui_3_17_2_1_1604881259521_14605 [class*=sqs-block-button-container] {
  text-align: left;
}
#block-716e51162c1b56bda8c3 + .row > .span-6 {
  width: 50% !important;
  float: left !important;
}

You are a legend, thank you!

Hey guys! This helped more than any other code with me, but how do i get them to line up like on your site? 

On 3/10/2021 at 5:19 AM, JmeKinser said:

Hey guys! This helped more than any other code with me, but how do i get them to line up like on your site? 

Hi. Can you share link to your site? We can check easier

Hi, I'm trying to get 2 side by side buttons in mobile, and have tried this solution  (and several others listed on the forum), but can't  get any to work. Can you help please? www.soundsound.co.uk/music-services brine template.

Thanks!

On 3/23/2021 at 8:34 AM, HamishC said:

Hi, I'm trying to get 2 side by side buttons in mobile, and have tried this solution  (and several others listed on the forum), but can't  get any to work. Can you help please? www.soundsound.co.uk/music-services brine template.

 

Thanks!

Hi,

Add to design > Custom CSS

/* Buttons side by side */
@media screen and (max-width:767px) {
div#page-60495bd43ecb7b11913eb624 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60495bd43ecb7b11913eb624 .span-12 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Thanks so much you absolutely rule, work's a treat!

Hi All,

I've tried putting the above into the custom CSS but it isn't working, can anyone please tell me how to get the two buttons aligned here please? https://www.sleepyangelsconsultancy.com/baby-sleep-coach-about-me

On 7/8/2021 at 9:23 PM, Sleepy_Angels said:

Hi All,

I've tried putting the above into the custom CSS but it isn't working, can anyone please tell me how to get the two buttons aligned here please? https://www.sleepyangelsconsultancy.com/baby-sleep-coach-about-me

 

 

The button text too long. You want make them side by side on mobile?

Does anyone know how I can get these buttons side by side on mobile?

https://trainverce.com/

11 hours ago, trainverce said:

Does anyone know how I can get these buttons side by side on mobile?

https://trainverce.com/

 

 

Add to Design > Custom CSS

 /* buttons side by side: program-memberships */
@media screen and (max-width:767px) {
div#page-section-60dc1c3acc33482b8e35e4fa>.row>.span-12>.row>.span-6 {
    width: 50% !important;
    float: left !important;
}
}

Having the same issue. Trying to get the Shop Now and Drop By buttons to stay side by side on mobile. Scroll to middle of homepage.  

https://crane-parakeet-thk3.squarespace.com/

pw: 5ways

Thanks in advance!

On 10/6/2021 at 8:55 PM, Nir said:

Having the same issue. Trying to get the Shop Now and Drop By buttons to stay side by side on mobile. Scroll to middle of homepage.  

https://crane-parakeet-thk3.squarespace.com/

pw: 5ways

Thanks in advance!

Add to Design > Custom CSS

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

Am Having a similar issue please help!

https://fish-flower-l5pm.squarespace.com/config/

3 minutes ago, Adamb123 said:

Am Having a similar issue please help!

https://fish-flower-l5pm.squarespace.com/config/

What is your protected password?

Hello!

New to Squarespace and having the same issue. Wanting to have the buttons side by side and not stacked. Please help!

https://www.claytonhightowerdesign.com/#page-section-61ce2f0310a48011dfcf50a1

On 12/31/2021 at 9:44 AM, Claytonhightowerdesign said:

Hello!

New to Squarespace and having the same issue. Wanting to have the buttons side by side and not stacked. Please help!

https://www.claytonhightowerdesign.com/#page-section-61ce2f0310a48011dfcf50a1

Add to Design > Custom CSS

/* Mobile buttons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1640887552438_41204+.row .span-3 {
    width: 33.3333% !important;
    float: left !important;
}

div#block-yui_3_17_2_1_1640887552438_41204+.row .span-3 .button-block {
    padding: 5px !important;
}

div#block-yui_3_17_2_1_1640887552438_41204+.row .span-3 .button-block a {
    font-size: 12px;
}
}

@tuanphan

I have the same issue and am wondering if you are able to help me with it?

Am trying to get the text "RiverLife Church" and the social icons on the mobile version of the footer for this site to be on the same line instead of the social icons being below the "RiverLife Church" text.

https://rlresource.squarespace.com/

Also trying to do it for the buttons at the bottom of these pages (before the footer) to be on the same line as well. 

https://rlresource.squarespace.com/connect

https://rlresource.squarespace.com/minister

Appreciate the help! Thank you.

6 hours ago, Sherman said:

@tuanphan

I have the same issue and am wondering if you are able to help me with it?

Am trying to get the text "RiverLife Church" and the social icons on the mobile version of the footer for this site to be on the same line instead of the social icons being below the "RiverLife Church" text.

https://rlresource.squarespace.com/

Also trying to do it for the buttons at the bottom of these pages (before the footer) to be on the same line as well. 

https://rlresource.squarespace.com/connect

https://rlresource.squarespace.com/minister

Appreciate the help! Thank you.

#1. Try adding to Design > custom CSS

/* Footer side by side */
@media screen and (max-width:767px) {
div#page-section-60891410e031bc2e3e5f8965>.row:nth-child(2)>.col {
    width: 50% !important;
    float: left !important;
}
}

#2. Try #1 first, then I will check other pages

I have a similar issue.
I am trying to get the "5K Memorial Run" button and the "Donate" button to align in the center, but it doesn't look right on mobile.
https://cassidyottofoundation.org
pw: cassidy

22 hours ago, CassidyOttoFoundation said:

I have a similar issue.
I am trying to get the "5K Memorial Run" button and the "Donate" button to align in the center, but it doesn't look right on mobile.
https://cassidyottofoundation.org
pw: cassidy

On mobile, you want them side by side or stacked & center?

3 hours ago, tuanphan said:

On mobile, you want them side by side or stacked & center?

Side by side.

On 1/17/2022 at 1:13 PM, CassidyOttoFoundation said:

Side by side.

Add to Design > Custom CSS

/* Mobile buttons */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1641333655510_6419+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1641333655510_6419+.row .span-6 .button-block {
    padding: 5px !important;
}
div#block-yui_3_17_2_1_1641333655510_6419+.row .span-6 .button-block a {
    white-space: nowrap;
    padding: 20px 40px !important;
}
}

Hi, I had the same issue with two images (Apple app store and Google play store links) on mobile (see "Augmented Reality" section on this page, pw: J@s7w^3$U3GYwv) and originally fixed the issue with this css:

Quote

@media screen and (max-width:767px) {
div#page-section-61d62c3360522232481768af >.row>.col>.row>.col> {
    width: 50% !important;
    float: left !important;
}
}

But then I needed to change the order in which items in the "Next-Gen Educational Technologies" section display on mobile so I added the following css:

Quote

@media screen and (max-width:767px) {
div#page-section-619d590f075300460c4af796 .row {
    display: flex;
    flex-direction: column-reverse;
}
}

The buttons are messed up now (they're still 50% size, just stacked rather than side-by-side), see screenshot:

Can anyone recommend a fix? I'm too inexperienced with css to figure out what's causing the clash. Thank you in advance!