Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Arna

swap block order in mobile view

Question

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 by aarnaa

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 1

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 by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 1

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/


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 1

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 by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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 by aarnaa

Share this post


Link to post
  • 0

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' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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/

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • -1

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.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...