Arna Posted May 17, 2016 Share Posted May 17, 2016 (edited) Lots of folks have asked a similar question in different ways and there don't seem to be answers posted, so I figured I'd try again. This community is such an amazing resource! I am wondering if there is a way to use CSS to swap the order of blocks in mobile view so that you can specify some blocks to stack right to left rather than the standard left to right. So something like: @media only screen and (max-width: 640px) { //identify blocks you want to swap and change their order } My site is fh-partners.squarespace.com. Here's what I want to do specifically (on the team page): I really like my desktop arrangement, which is: <1 picture> <2 text> <3 text> <4 picture> Ideally I would like my mobile view to be arranged: <1 picture> <2 text> <4 picture> <3 text> But squarespace goes left to right so it ends up as: <1 picture> <2 text> <3 text> <4 picture> Is there css to swap blocks 3 and 4 in the mobile view? Thank you in advance! Edited May 17, 2016 by aarnaa paul2009, tors and coen 3 Link to comment
climbrick1 Posted May 17, 2016 Share Posted May 17, 2016 Yo dawg, Squarespace uses LayoutEngine which is the system used to place blocks on a page. This system is automatically set up to stack blocks when the browser window shrinks, and obviously stacks them one after another on mobile. Because this system is automatic, there is not a way to rearrange the order on mobile. It is also not recommended to add custom code to modify LayoutEngine in any way. Link to comment
Arna Posted May 17, 2016 Author Share Posted May 17, 2016 (edited) Thanks for the reminder about the risk of using custom code. I understand that SquareSpace never recommends futzing with their defaults. However, I'd love to see if someone in the community knows how to make this happen, since lots of people seem to have similar questions. Edited May 17, 2016 by aarnaa Link to comment
Solution brandon Posted May 18, 2016 Solution Share Posted May 18, 2016 (edited) Hi there. Give this a try. @media only screen and (max-width: 640px) { #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) { display: table; } #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) .col:first-child { display: table-footer-group; } } Using Flexbox may be the more standard way to reflow the visual presentation of the document, but using it here causes additional complications, and doesn't have as broad compatibility as display:table. Let me know how it works for ya. -Brandon Edited May 18, 2016 by brandon Initial Revision JohnNightingale 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
brandon Posted May 18, 2016 Share Posted May 18, 2016 Keep in mind that this code is very specifically written for your current row/column/block arrangement. If you rearrange things, this code would have to be refactored. But this at least shows it's possible (and not that difficult) to do, and gives you a pattern to follow if you need to modify it in the future. Reference: http://stackoverflow.com/questions/220273/ bizbolsterlori 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
brandon Posted May 18, 2016 Share Posted May 18, 2016 (edited) Another option may be to float the images instead of making distinct columns for them. I believe that then the images will always be first in the document flow even when floated to the right. This would of course cause the text to flow around the image, rather than staying within its own column which may or may not be desirable to you. Edited May 18, 2016 by brandon Initial Revision If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Arna Posted May 18, 2016 Author Share Posted May 18, 2016 Wow @BrandonW. You are truly amazing. Thank you so, so much. The code works perfectly! I am extremely grateful. bizbolsterlori 1 Link to comment
brandon Posted May 18, 2016 Share Posted May 18, 2016 Cool man; glad that worked. You deserve some credit for your very clearly articulated question. That makes a big difference when it comes to unique requests. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Arna Posted September 11, 2016 Author Share Posted September 11, 2016 Hi @BrandonW. I hope you're doing great! I just posted a similar question here.I would be extremely grateful if you might take a look. Link to comment
sebastiandre Posted September 28, 2016 Share Posted September 28, 2016 I have a very similar problem and tried to adapt your code to my layout, but just can't manage :/ Would you be able to help me out, Brandon? My site:http://www.sebastiandressel.com/#/filmography/ Link to comment
Lot71 Posted October 6, 2016 Share Posted October 6, 2016 Hi @aarnaa and @BrandonW. Thanks for the thread above. I have a similar situation with (3) pairs of image/text blocks that I need to reorder on Mobile. On Desktop I have: 1. Text, Image 2. Image, Text 3. Text, Image What code would I use to make Mobile: 1. Image 2. Text 3. Image 4. Text 5. Image 6. Text Thanks! Link to comment
Lot71 Posted October 6, 2016 Share Posted October 6, 2016 Hi @aarnaa and @BrandonW. Thanks for the thread above. I have a similar situation with (3) pairs of image/text blocks that I need to reorder on Mobile. On Desktop I have: 1. Text, Image 2. Image, Text 3. Text, Image What code would I use to make Mobile: 1. Image 2. Text 3. Image 4. Text 5. Image 6. Text Thanks! Link to comment
brandon Posted October 6, 2016 Share Posted October 6, 2016 It's probably better to post a new questions with a link to the page. Code like that can be very specific and is not always practical in certain situations. aarnaa's was a simple use case. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
angelawang0524 Posted February 15, 2017 Share Posted February 15, 2017 Hi Brandon! I hope this is not annoying but I came across this answer for an exact issue. I've been trying to apply the code to my page (with corresponding divs) but still can't figure out the correct css code. I was wondering if you could give me some guidance. This is the page I am having problems with: www.angela-w.com I am trying to line up the images above each explanation text blurb on mobile view so that it's image > text on mobile for every instance. Thanks so much! Link to comment
brandon Posted February 15, 2017 Share Posted February 15, 2017 angelawang0524: I did take a look at your site, but your layout is very sporadic. What I mean is, the manner in which you have each row layed out is sporadic, such that there is little common pattern. In some cases, you have spacer blocks, others, not. In some cases you have rows inside rows, others not. So it's too difficult to write rules for any pattern. This happens when dragging-and-dropping in layout engine...it can result in a layout that looks like you want it but is in fact quite messy. Unfortunately that's the case here, so I can't seem to write reliable rules for your situation. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Guest Posted May 30, 2017 Share Posted May 30, 2017 Another way to do it, is to duplicate your content blocks and then hide / show the ones you want using display: none; Example: You have a block that you want one step lower on mobile. Duplicate it, put it where it would be on mobile, then hide it on the desktop version, but leave it visible on the mobile version vice versa. You can use "@media only screen and (max-width:768px) { your CSS here }" to change stuff only on mobile devices. This method will affect your page load time tho. It might also affect your SEO if you duplicate stuff that contains h1 tags or image alt data. Link to comment
SimonaZ7 Posted June 2, 2017 Share Posted June 2, 2017 Hi @BrandonW I am sorry you must be sick of this! But I'd reaaaally appreciate it if you could have a look at my site? I am creating a site for an Omani Women's charity and I'm experiencing the same problem. https://sim-zuk-7r39.squarespace.com/our-objectives-a/ It's in Arabic and Arabic reads Right-To-Left. So on desktop text box number 1 has to be on the right hand side whilst number 2 on the left and so on... This is fine for the desktop version, but on mobile it stacks it up and orders it in a way that doesn't make sense anymore (2,1,4,3,6,5). Thank you sooooo much in advanceSim Link to comment
oasis2284 Posted June 6, 2017 Share Posted June 6, 2017 Hello @Brandon@, where did you insert this code? Link to comment
kattilew Posted October 31, 2017 Share Posted October 31, 2017 Hi @BrandonW I would love some help with the stacking on my site! I tried to create a new question but for some reason it won't let me tag you. Can you please help me? I need to customize the stacking on my website: https://whitney-luckett-amak.squarespace.com As of right now the layout is just the way I want it: Image Text Text Image Image Text Text Image But on mobile its: Image Text TextImage Image Text TextImage Is there a way or code to re-stack the blocks to: Image Text Image Text Image Text Image Text Thank you in advance!!! Kat Link to comment
Guest Posted July 28, 2019 Share Posted July 28, 2019 Hey @BrandonW ! I'm new to SquareSpace and have this exact same problem. My website is informd.co.in. Tried tweaking your code but it doesn't work for me. Can you please help me out? Link to comment
Mie_MIe Posted February 22, 2021 Share Posted February 22, 2021 Hi! I think I have the same problem I really need help with the website: https://www.drzelinamedina.com On the homepage of the website in desktop view you can see that the images are in Grid layout. and in the mobile view is in a stack layout. The Desktop view Layout right now is really good, so I don't really want to change it which is: Quote <Picture 1> <Picture 2> <Picture 3> <Picture 4> <Picture 5> <Picture 6> <Picture 7> <Picture 8> <Picture 9> <Picture 10> <Picture 11> <Picture 12> Expand Preferably would like my mobile view to be Quote <Picture 1> <Picture 2> <Picture 3> <Picture 4> <Picture 5> <Picture 6> <Picture 7> <Picture 8> <Picture 9> <Picture 10> <Picture 11> <Picture 12> But squarespace arange the mobile view like this: Quote <Picture 1> <Picture 4> <Picture 7> <Picture 10> <Picture 2> <Picture 5> <Picture 8> <Picture 11> <Picture 3> <Picture 6> <Picture 9> <Picture 12> Expand Is there CSS or code to rearrange the pictures? I hope this is possible. Thank you in advance claudinosun and 7dubs 2 Link to comment
tuanphan Posted February 28, 2021 Share Posted February 28, 2021 On 2/22/2021 at 9:21 PM, Mie_MIe said: Hi! I think I have the same problem I really need help with the website: https://www.drzelinamedina.com On the homepage of the website in desktop view you can see that the images are in Grid layout. and in the mobile view is in a stack layout. The Desktop view Layout right now is really good, so I don't really want to change it which is: Quote <Picture 1> <Picture 2> <Picture 3> <Picture 4> <Picture 5> <Picture 6> <Picture 7> <Picture 8> <Picture 9> <Picture 10> <Picture 11> <Picture 12> Expand Preferably would like my mobile view to be Quote <Picture 1> <Picture 2> <Picture 3> <Picture 4> <Picture 5> <Picture 6> <Picture 7> <Picture 8> <Picture 9> <Picture 10> <Picture 11> <Picture 12> But squarespace arange the mobile view like this: Quote <Picture 1> <Picture 4> <Picture 7> <Picture 10> <Picture 2> <Picture 5> <Picture 8> <Picture 11> <Picture 3> <Picture 6> <Picture 9> <Picture 12> Expand Is there CSS or code to rearrange the pictures? I hope this is possible. Thank you in advance Hi, This is popular question. Here this the solution Add Image 1, 2, 3 Add a Line Block Add Image 4, 5, 6 Add a Line Block .... Remove all Line Blocks. frameids 1 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
frameids Posted April 8, 2021 Share Posted April 8, 2021 @tuanphan - you always have the right answer. I'm always amazed at how your answer is always what I'm looking for. Maybe this is not true for everyone, but if I'm in a forum's question and you have commented on it I don't even bother looking at anyone else's comments. Thanks @tuanphan! Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 On 4/8/2021 at 10:55 PM, frameids said: @tuanphan - you always have the right answer. I'm always amazed at how your answer is always what I'm looking for. Maybe this is not true for everyone, but if I'm in a forum's question and you have commented on it I don't even bother looking at anyone else's comments. Thanks @tuanphan! Have you solved your problem yet? 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
Keltie Posted June 30, 2021 Share Posted June 30, 2021 Hi! I hope this is the right place to share my question - I think it relates to this feed. Is there a way to get the mobile view for my site to show up the same as on desktop? So, Image #1, Text #1, Button #1, Image #2, Text #2, Button #2...etc? Right now all images are stacking together, then all text, then all buttons. I've attached images of what I want (but in mobile view) vs. what I'm getting. @tuanphan - it sees like you may be able to help? 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