Need help switching section order on mobile

Site URL: https://www.hereandnow.design

On my homepage I want to rearrange the order of two sections on the mobile view.

On desktop view you can see the section on the left with the clock that says "your time is here and now" and the section on the right says "Intentional branding for businesses who make the world a better place." I like this placement on desktop but on mobile I would rather the right section come first.

Can someone people advise me with what CSS to use to make this happen? Please and thank you!

Do you use Personal Plan or higher?

On 11/1/2020 at 9:00 AM, tuanphan said:

Do you use Personal Plan or higher?

I use the business plan!

I have the same question! There are many solutions out there for re-ordering *blocks* on mobile, but not *sections*.

Here's my site in case it helps anyone with troubleshooting.

• https://gw-draft1.squarespace.com/
• pass: bekind2020

My goal is for the homepage on mobile to read, after the "Golden Word connects brands and customers..." section :

1. Photo - Magazine
2. "Tailored, thoughtful, timely, thorough. "
3. Photo - Jean jackets - (GOOD)
4. "Meet our small, but mighty team." - (GOOD)
5. Photo - Office
6. "Work with us"
7.  Photo - Power of PR - (GOOD)
8. "We can teach you, too" - (GOOD)

On 11/2/2020 at 11:28 PM, hereandnow said:

I use the business plan!

Sorry, forgot your question. I will check again tomorrow.

25 minutes ago, alicroft said:

I have the same question! There are many solutions out there for re-ordering *blocks* on mobile, but not *sections*.

Here's my site in case it helps anyone with troubleshooting.

• https://gw-draft1.squarespace.com/
• pass: bekind2020

 

My goal is for the homepage on mobile to read, after the "Golden Word connects brands and customers..." section :

1. Photo - Magazine
2. "Tailored, thoughtful, timely, thorough. "
3. Photo - Jean jackets - (GOOD)
4. "Meet our small, but mighty team." - (GOOD)
5. Photo - Office
6. "Work with us"
7.  Photo - Power of PR - (GOOD)
8. "We can teach you, too" - (GOOD)

Do you use Personal or Business Plan?

33 minutes ago, tuanphan said:

Do you use Personal or Business Plan?

This site is currently a Trial Site, I will likely be purchasing the Business Plan for it

On 11/2/2020 at 11:28 PM, hereandnow said:

I use the business plan!

Add to Home > Settings . Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 640) {
$('section#about-split-right-lineleft-linetop').insertBefore('section#about-me-split-left-linetop');
})
</script>

On 11/5/2020 at 12:07 AM, alicroft said:

This site is currently a Trial Site, I will likely be purchasing the Business Plan for it

Add to Code Injection Footer. Then save & check on real mobile

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('[data-section-id="5f8df186d1400713addc98bc"]').insertBefore('[data-section-id="5f8de7dac5fb485be1dd8e80"]');
})
</script>

Try it first, If it works, I will send code for other items.

On 11/6/2020 at 6:52 AM, tuanphan said:

Add to Home > Settings . Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 640) {
$('section#about-split-right-lineleft-linetop').insertBefore('section#about-me-split-left-linetop');
})
</script>

 

Hi again!

I just added the code but it looks like it's not working, do you have any other suggestions?

8 hours ago, hereandnow said:

Hi again!

I just added the code but it looks like it's not working, do you have any other suggestions?

Did you edit anything after posting this question??

@tuanphan Sadly this didn't work for me, either.

On 11/6/2020 at 7:54 AM, tuanphan said:

Add to Code Injection Footer. Then save & check on real mobile

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('[data-section-id="5f8df186d1400713addc98bc"]').insertBefore('[data-section-id="5f8de7dac5fb485be1dd8e80"]');
})
</script>

Try it first, If it works, I will send code for other items.

9 hours ago, tuanphan said:

Did you edit anything after posting this question??

I don't believe I have edited anything since posting this question!

6 hours ago, alicroft said:

@tuanphan Sadly this didn't work for me, either.

 

3 hours ago, hereandnow said:

I don't believe I have edited anything since posting this question!

Add code then check on real mobile. Don't check on Chrome Tool or SS preview mode

1 hour ago, tuanphan said:

Add code then check on real mobile. Don't check on Chrome Tool or SS preview mode

Yep, that's what I've done, checked on my iPhone (Safari).

I've found a (semi) solution for my issue:

I purchased Schwartz Edmisten's "Custom Layouts in Squarespace" course and within that there is unique code to get a banner image+caption to sit beside each other, and automatically order correctly on mobile. CSS only required.

https://courses.schwartz-edmisten.com/bundles/custom-layouts-in-squarespace

I say "semi" because I'm still trying to figure out if the ratio of the image + caption can be varied, i.e. 70/30. By default his code makes it 50/50.

23 hours ago, tuanphan said:

 

Add code then check on real mobile. Don't check on Chrome Tool or SS preview mode

I checked on google chrome on my iPhone but it wasn't working

@hereandnow specifically to swap the 2 sections that you asked about in  your initial question, I think this custom javascript might work... give it a shot:

<script>
  if (window.innerWidth <= 960) {
    first_elem = document.getElementById('about-me-split-left-linetop')
    second_elem = document.getElementById('about-split-right-lineleft-linetop')
    first_elem.insertBefore(second_elem, first_elem.childNodes[1])
    second_elem.style.borderBottom="1px solid #fff";
    second_elem.style.borderTop="none";
  }
</script>

We need to adjust the border styles as you can see since reordering them tweaks how they're displayed. This may not be perfect, and it'd need customizations for swapping other sections (it'd have different selectors).

One other note is that this will not "reset" the divs if someone resizes their window from small->big or vice versa, it will only check on initial load and switch order for browsers with a width of less than or equal to 960px (window.innerWidth).