Change order of blocks on mobile

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.

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

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. 

@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 

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

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

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

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

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

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

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

@bangank36 Thank you!!  I think I have now sorted it all.  Would this be the same problem on the Services page?  I would like the images to stack reading left to right on mobile view, currently they read downwards?

@sandracheesman Have you solved this yet?