Beyondspace Posted January 19, 2022 Share Posted January 19, 2022 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 MeganH888 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
MeganH888 Posted January 19, 2022 Share Posted January 19, 2022 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! Beyondspace 1 Link to comment
MeganH888 Posted January 19, 2022 Share Posted January 19, 2022 (edited) @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 January 20, 2022 by MeganH888 Link to comment
MeganH888 Posted January 20, 2022 Share Posted January 20, 2022 (edited) @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 January 20, 2022 by MeganH888 Pasted wrong css Beyondspace 1 Link to comment
Beyondspace Posted January 20, 2022 Share Posted January 20, 2022 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 MeganH888 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted January 20, 2022 Share Posted January 20, 2022 My testing MeganH888 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
MeganH888 Posted January 20, 2022 Share Posted January 20, 2022 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! Beyondspace 1 Link to comment
Sherman Posted January 20, 2022 Share Posted January 20, 2022 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
tuanphan Posted January 21, 2022 Share Posted January 21, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Sherman Posted January 21, 2022 Share Posted January 21, 2022 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 Link to comment
tuanphan Posted January 22, 2022 Share Posted January 22, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
PedroP123 Posted January 26, 2022 Share Posted January 26, 2022 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. Link to comment
BG-fn Posted February 22, 2022 Share Posted February 22, 2022 (edited) 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 Edited February 23, 2022 by BG-fn added link to page where issue is Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BG-fn Posted February 28, 2022 Share Posted February 28, 2022 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!! Link to comment
tuanphan Posted March 3, 2022 Share Posted March 3, 2022 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; } } BG-fn 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BG-fn Posted March 3, 2022 Share Posted March 3, 2022 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
BG-fn Posted March 3, 2022 Share Posted March 3, 2022 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
tuanphan Posted March 6, 2022 Share Posted March 6, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jvincuilla Posted March 10, 2022 Share Posted March 10, 2022 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
tuanphan Posted March 13, 2022 Share Posted March 13, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HunterD Posted April 24, 2022 Share Posted April 24, 2022 (edited) 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; }} Edited April 24, 2022 by HunterD Link to comment
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HunterD Posted April 27, 2022 Share Posted April 27, 2022 4 hours ago, tuanphan said: It looks like you solved this? Yes, solved, thanks! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment