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

swap block order in mobile view


Arna

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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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?

Desktop layout.png

Mobile view 1.png

Mobile View #2.png

Link to comment
  • 0
On 6/30/2021 at 8:45 PM, Keltie said:

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?

Desktop layout.png

Mobile view 1.png

Mobile View #2.png

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hi, please help.

 

I have a similar issue from my website as well.

Website URL: https://www.coachcourtney.net/

From the Footer, the social media icons are arranged this way:

image.thumb.png.a2b804862ff7038f87e092459cf7cd3d.png

But on the mobile version, the icons looked like this:

image.png.56ceac03af193251efdbea59c4b53512.png

Is there any way for the social media icons from the mobile version arranged just like from the dekstop version? Like this way, I think?

image.png.79567eadeb576a99c8c845a896eb36f7.png

Also, it is possible to align the icons from the desktop version in the text below? And align the right section as well?

image.thumb.png.a3f06b29835ba40709f2119b0d306e9a.png

For the mobile version, is it possible to move the texts to the center? image.png.06d021f7cea1a093b1f322615d22f26d.png

 

Thank you. I hope you'll be able to read my comment though.

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