Jump to content

Reorder blocks on mobile

Recommended Posts

Site URL: https://carolyn-lykkemark-voice.squarespace.com/voice-lessons

Password: sing

Can anyone help me with some code? I'm using spacers to create a cool ripple effect on desktop, but on mobile, the images are showing up in the wrong order. I've tried targeting with css and can only get it to work if I use section ids, which won't work for this set up with the collage/rippled effect instead of straight columns as I can't put them in different sections and get the result I want.

I'd like the images/text in the top to go "loud, strong, free"/"you're frustrated"/"you want to..."

And then in the next image section to go "now you're discourage"/"Yet you yearn"/

Thank so much for your help!

Link to comment
On 11/13/2021 at 4:20 AM, angelaw said:

Site URL: https://carolyn-lykkemark-voice.squarespace.com/voice-lessons

Password: sing

Can anyone help me with some code? I'm using spacers to create a cool ripple effect on desktop, but on mobile, the images are showing up in the wrong order. I've tried targeting with css and can only get it to work if I use section ids, which won't work for this set up with the collage/rippled effect instead of straight columns as I can't put them in different sections and get the result I want.

I'd like the images/text in the top to go "loud, strong, free"/"you're frustrated"/"you want to..."

And then in the next image section to go "now you're discourage"/"Yet you yearn"/

Thank so much for your help!

Try adding to your Home > Design > Custom Css

#page-section-612fcc9cba09711c67c04f03  .row > .col > .row {
  display: flex;
  flex-direction: column;
}

#page-section-612fcc9cba09711c67c04f03  .row > .col > .row > .span-6:first-child {
  order:2;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

 

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

@angelaw I just solved a similar case.

With this section

I'd like the images/text in the top to go "loud, strong, free"/"you're frustrated"/"you want to..."

Our approach is add one more section under current section, with order what you want, then we will give the code to 

  • hide new section on desktop - show it on mobile only
  • hide current section on mobile - show it on desktop only

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.