Jump to content

Change order of blocks on mobile

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://janakorim.com

Hi there, 

I'm wondering how I can change the block order on mobile for the columns at the bottom of the page. Right now it lists "past projects" to "now launching" from left to right. On mobile, I'd like it to put "now launching" on top and "past projects" at the bottom (obviously for both the text and images since they're in different blocks). Any help on this would be greatly appreciated.

Edited by bigpoppapaul
Link to comment
  • Solution
1 hour ago, bigpoppapaul said:

Site URL: https://janakorim.com

Hi there, 

I'm wondering how I can change the block order on mobile for the columns at the bottom of the page. Right now it lists "past projects" to "now launching" from left to right. On mobile, I'd like it to put "now launching" on top and "past projects" at the bottom (obviously for both the text and images since they're in different blocks). Any help on this would be greatly appreciated.

Can use css grid for this, you should paste this snippet to Settings->Design->Custom Css

@media screen and (max-width: 767px) {
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row {
    display: grid;
  }
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row .span-4:nth-child(1) {
    order: 2
  }
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row .span-4:nth-child(2) {
    order: 1
  }
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row .span-4:nth-child(3) {
    order: 0;
  }
}

image.thumb.png.d9bc27198e22394d94a76406dbb56428.png

Greeting, it's 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, Keyword Highlighter
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
On 10/29/2020 at 7:53 PM, bangank36 said:

Can use css grid for this, you should paste this snippet to Settings->Design->Custom Css




@media screen and (max-width: 767px) {
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row {
    display: grid;
  }
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row .span-4:nth-child(1) {
    order: 2
  }
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row .span-4:nth-child(2) {
    order: 1
  }
  section[data-section-id="5f93c908d3bfb9134fc24693"]  .sqs-row .span-4:nth-child(3) {
    order: 0;
  }
}

 

That worked beautifully. Thank you very much. I'm going to study this and try and replicate it for the future if I need it again. 

Edited by bigpoppapaul
Link to comment
  • 4 months later...

@bangank36  Hi there,

I am having the same issue on my site https://buffalo-helicon-g5ws.squarespace.com/  p/word: sandrabm

On the second section with the green background I would like the Lorem Ipsum text and the 'A Place Where →' text to be above the video of the red dog 'free kisses' so it mirrors the layout on the first blue page.

Then the same on the red page below.  The white dog video before the contact form but after the 'we'd love to hear from you for sure'.  I have tried every combination of css but nothing seems to be working.

If you can help I would be very grateful!

Sandra 

Link to comment
1 hour ago, sandracheesman said:

@bangank36  Hi there,

I am having the same issue on my site https://buffalo-helicon-g5ws.squarespace.com/  p/word: sandrabm

On the second section with the green background I would like the Lorem Ipsum text and the 'A Place Where →' text to be above the video of the red dog 'free kisses' so it mirrors the layout on the first blue page.

Then the same on the red page below.  The white dog video before the contact form but after the 'we'd love to hear from you for sure'.  I have tried every combination of css but nothing seems to be working.

If you can help I would be very grateful!

Sandra 

It's can't since these blocks are not on the same row

Greeting, it's 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, Keyword Highlighter
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
26 minutes ago, sandracheesman said:

@bangank36 but is there not a way to reorder via individual block number css?

Your first 2 items is on one column while the picture on another, it's cant be changed using css

Greeting, it's 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, Keyword Highlighter
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
15 minutes ago, sandracheesman said:

@bangank36 thank you, I didn't realise this was not possible with SQS.  I will have to reformat - unless you can make a suggestion for me to keep it the same but to only make it workable as is?

Can do a workaround like place the same image under the title and show/hode 2 images accordingly. Let me know if you want to go that way i will check again

Greeting, it's 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, Keyword Highlighter
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
1 minute ago, sandracheesman said:

@bangank36  ahh yes that is a clever idea.  You mean to have two videos on the same page, one underneath for mobile and one to the side for desktop and then use code to hide the mobile one on desktop and vice versa for mobile?

You are right

Greeting, it's 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, Keyword Highlighter
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
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

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