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

swap block order in mobile view


Arna
Go to solution Solved by brandon,

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
Link to post
  • Answers 23
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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, p

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

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 ther

23 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)

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)

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)

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.

Link to post
  • 1
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.

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
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)

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!

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!

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)

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!

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)

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

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

Link to post
  • 0

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

Link to post
  • 0

@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 post
  • 0
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?

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.

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...