Side by side buttons for mobile and desktop

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:

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

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

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!

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

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

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

My testing

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!

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

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

1 hour ago, tuanphan said:

You can send, we will check

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

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

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.

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

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)

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?

On 2/26/2022 at 9:03 PM, tuanphan said:

Hi. Which buttons?

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

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

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. 

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

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

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

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?

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

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

It looks like you solved this?

4 hours ago, tuanphan said:

It looks like you solved this?

Yes, solved, thanks!