Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Side by side buttons for mobile and desktop


Zambo107

Question

Recommended Posts

  • 0

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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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
  • 0

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!

Link to comment
  • 0
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
  • 0
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
  • 0
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
  • 0
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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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
  • 0

@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
  • 0
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
  • 0
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
  • 0
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
  • 0

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
  • 0
1 hour ago, MeganH888 said:

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:

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:

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!

It looks like you select and set style on the wrapper the button, not the Next gen section

image.thumb.png.f563853de898c3c1e45d83a6026a99ac.png

For the Next-gen section, I think the right selector is

section[data-section-id="61a865d928d1c55296d8f79d"] .sqs-layout  > .row > .col > .row:nth-child(2) {
  display: flex;
  flex-direction: column-reverse;
}

Let me know how it works

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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

Create an account or sign in to comment

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

×
×
  • Create New...