Jump to content

Side by side buttons for mobile and desktop

Recommended Posts

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

image.thumb.png.d201f96b636bc5e66d92d6707096c1d2.png

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 months later...
  • 2 weeks later...
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? 

Screen Shot 2021-03-09 at 4.18.36 PM.png

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
11 hours ago, trainverce said:

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

https://trainverce.com/

 

 

Screen Shot 2021-09-16 at 11.43.06 am.png

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
3 minutes ago, Adamb123 said:

Am Having a similar issue please help!

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

image.thumb.png.ef5947819c6b3530164f5793cf354671.png

What is your protected password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
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

image.thumb.png.1833fa04d125749496b467f09f1c2238.png

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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:

App-store-buttons-stacked.thumb.png.33aa3bfd10989bded4d03b1ab00d75eb.png

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

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.