Jump to content

Need help switching section order on mobile

Recommended Posts

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!

Link to comment
  • Replies 16
  • Views 469
  • Created
  • Last Reply

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.

 

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)

 

 

 

Link to comment
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.

 

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?

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

 

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

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

Link to comment

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

 

Link to comment
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

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

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.

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.