angelaw Posted November 12, 2021 Share Posted November 12, 2021 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
Beyondspace Posted November 14, 2021 Share Posted November 14, 2021 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 tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
angelaw Posted November 15, 2021 Author Share Posted November 15, 2021 @bangank36, thank you! Unfortunately, it didn't work at all... Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 @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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment