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
15 minutes ago, bangank36 said:

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

Ahhh yes!! That fixed it. Thank you so much!

Link to comment
  • 0

@bangank36 Oh shoot, wait. That fixed the button display issue, but now the video that's supposed to be above the blurb is below it (the hand holding the phone should be right above or below the text that says "Augmented Reality (AR)."

(I hadn't had this perfect before, but ideally you'd see the video thumbnail, then category title (e.g. VR, AR, or 360), and then the little blurb.

Edited by MeganH888
Link to comment
  • 0

@bangank36 I realized I explained this poorly to begin with (sorry!). I'm fine with the way the "Next-Gen Educational Technologies" section displays on desktop and mobile, it's just the "Augmented Reality (AR)" section below it where I'm having issues. On mobile, I'd like to keep the two app store buttons side-by-side and also change the order in which everything displays so in the end it looks like this:


(1) <video thumbnail with phone>

(2) "Augmented Reality (AR)"

(3) Paragraph of text

(4) Side-by-side app store buttons

 

–––––

Right now, it's in this order:

 

(2) "Augmented Reality (AR)"

(3) Paragraph of text

(4) Side-by-side app store buttons

(1) <video thumbnail with phone>

 

–––––

I added the version of the css you sent but used the section ID for the "Augmented Reality" section, as follows:

@media screen and (max-width:767px) {
div#page-section-61d62c3360522232481768af .sqs-layout  > .row > .col > .row:nth-child(2) {
  display: flex;
  flex-direction: column-reverse;
}
}

Edited by MeganH888
Pasted wrong css
Link to comment
  • 0
57 minutes ago, MeganH888 said:

@bangank36 I realized I explained this poorly to begin with (sorry!). I'm fine with the way the "Next-Gen Educational Technologies" section displays on desktop and mobile, it's just the "Augmented Reality (AR)" section below it where I'm having issues. On mobile, I'd like to keep the two app store buttons side-by-side and also change the order in which everything displays so in the end it looks like this:


(1) <video thumbnail with phone>

(2) "Augmented Reality (AR)"

(3) Paragraph of text

(4) Side-by-side app store buttons

 

–––––

Right now, it's in this order:

 

(2) "Augmented Reality (AR)"

(3) Paragraph of text

(4) Side-by-side app store buttons

(1) <video thumbnail with phone>

 

–––––

I added the version of the css you sent but used the section ID for the "Augmented Reality" section, as follows:

@media screen and (max-width:767px) {
div#page-section-61d62c3360522232481768af .sqs-layout  > .row > .col > .row:nth-child(2) {
  display: flex;
  flex-direction: column-reverse;
}
}

You can try 

@media only screen and (max-width: 767px) {
  section[data-section-id="61d62c3360522232481768af"]  .sqs-layout > .row {
    display: flex;
    flex-direction: column;
  }

  section[data-section-id="61d62c3360522232481768af"]  .sqs-layout > .row > .span-7 {
    order: 1;
  }

  section[data-section-id="61d62c3360522232481768af"]  .sqs-layout > .row > .span-4 {
    order: 2;
  }
}

Let me know how it works on your site

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

My testing

image.png.ef57279d94c8df9ca94ad908cce99fc3.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
4 minutes ago, bangank36 said:

You can try 

@media only screen and (max-width: 767px) {
  section[data-section-id="61d62c3360522232481768af"]  .sqs-layout > .row {
    display: flex;
    flex-direction: column;
  }

  section[data-section-id="61d62c3360522232481768af"]  .sqs-layout > .row > .span-7 {
    order: 1;
  }

  section[data-section-id="61d62c3360522232481768af"]  .sqs-layout > .row > .span-4 {
    order: 2;
  }
}

Let me know how it works on your site

Yes!!!! Solved! Thank you SO MUCH!

Link to comment
  • 0
On 1/12/2022 at 9:15 PM, tuanphan said:

#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

Thanks @tuanphan! it worked amazingly! 

Could you help me with the other one as well?

Regards,

Sherman

Link to comment
  • 0
23 hours ago, Sherman said:

Thanks @tuanphan! it worked amazingly! 

Could you help me with the other one as well?

Regards,

Sherman

You can send, we will check

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/21/2022 at 2:21 PM, Sherman said:

Hi Tuan Phan, 

It would be the buttons (at the bottom of the page) for these two page:

https://resource.riverlife.org.sg/connect

https://resource.riverlife.org.sg/minister

I need them to be aligned in mobile mode. Currently, they are not aligned on mobile mode.

Appreciate the help loads. Thank you so much.

Regards,

Sherman

Add to Design > Custom CSS

/* Mobile align buttons */
@media screen and (max-width:767px) {
/* Connect */
div#block-1751df209f5c5aba50ab+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-1751df209f5c5aba50ab+.row .span-6 * {
    font-size: 14px;
}
/* Minister */
div#block-280a2b99a9c9297f1b66+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-280a2b99a9c9297f1b66+.row .span-6 * {
    font-size: 14px;
}}

 

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/26/2022 at 7:18 PM, PedroP123 said:

Hello, I'm having the same problem. 

I need the buttons side by side on the mobile view. Can anyone help?

Site: https://flatworm-helix-rs72.squarespace.com/

Pass: PARREIRA123

 

Thank you.

The site is expired. You can contact Squarespace Customer Care to renew it (free)

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 2/22/2022 at 11:13 PM, BG-fn said:

Hi Tuan Phan - pretty much like others above I can't get the buttons next to each other in mobile. I tried code snippets from above and other stuff - nothing has worked. They remain staggered 😞  Would appreciate any help and guidance, thanks!

Link: https://onion-kangaroo-42sh.squarespace.com/case-study-kimberlyclark

Pwd: temp1234

 

Hi. Which buttons?

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 3/1/2022 at 2:44 AM, BG-fn said:

oH hi, sorry missed this earlier. The NEXT and PREV buttons at the bottom of this page:   https://onion-kangaroo-42sh.squarespace.com/case-study-kimberlyclark

🙏 thanks for taking a peek!!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62168b241c7dba5bfca10689 .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
2 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62168b241c7dba5bfca10689 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

You are the best - we appreciate your kindness and help. Sending you a gift to show our appreciation. 

Link to comment
  • 0
1 hour ago, BG-fn said:

You are the best - we appreciate your kindness and help. Sending you a gift to show our appreciation. 

How did you locate the "page-section" ID ? I have the tags turned on but don't see a page section. I am trying to replicate this for another page and can't find the page section ID 😞 . 

Link to comment
  • 0
On 3/3/2022 at 11:16 PM, BG-fn said:

How did you locate the "page-section" ID ? I have the tags turned on but don't see a page section. I am trying to replicate this for another page and can't find the page section ID 😞 . 

With the coder, finding the page collection is faster than the data section id

Instead of using #page-section, you can use data section id. Use this tool to find it. 

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

 

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

UGHHHH

This is insane. I can't believe its this hard to simply put two buttons side by side on mobile, I've been trying for hours using the codes listed above and NOTHING is working.

 

www.vimana.agency SOMEONE PLEASE HELP IM LOSING MY MIND

Link to comment
  • 0
On 3/10/2022 at 8:16 AM, jvincuilla said:

UGHHHH

This is insane. I can't believe its this hard to simply put two buttons side by side on mobile, I've been trying for hours using the codes listed above and NOTHING is working.

 

www.vimana.agency SOMEONE PLEASE HELP IM LOSING MY MIND

I see you solved?

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 have the same problem. I managed to get the buttons side by side, but I have a problem with the learn more button, see the image bellow. Site: https://www.metcalfmethod.com

 

Thanks!!

 

//* mobile buttons side by side */
@media screen and (max-width:767px) {
div#page-section-6265576ad240466a7d573273 .span-6 {
    width: 50% !important;
    float: left !important;
}}

Screen Shot 2022-04-24 at 18.44.07.png

Edited by HunterD
Link to comment
  • 0
On 4/25/2022 at 4:46 AM, HunterD said:

Hi!  I have the same problem. I managed to get the buttons side by side, but I have a problem with the learn more button, see the image bellow. Site: https://www.metcalfmethod.com

 

Thanks!!

 

//* mobile buttons side by side */
@media screen and (max-width:767px) {
div#page-section-6265576ad240466a7d573273 .span-6 {
    width: 50% !important;
    float: left !important;
}}

Screen Shot 2022-04-24 at 18.44.07.png

It looks like you solved this?

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 4/24/2022 at 10:46 PM, HunterD said:

Hi!  I have the same problem. I managed to get the buttons side by side, but I have a problem with the learn more button, see the image bellow. Site: https://www.metcalfmethod.com

 

Thanks!!

 

//* mobile buttons side by side */
@media screen and (max-width:767px) {
div#page-section-6265576ad240466a7d573273 .span-6 {
    width: 50% !important;
    float: left !important;
}}

Screen Shot 2022-04-24 at 18.44.07.png

Please can you explain how you got this number? I'm having similar issue on my website and I don't know how to use it for my website too

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