Jump to content

7.1 Swap block order on mobile

Recommended Posts

Site URL: https://entrenosotros.just-america.com/02-2020-actividades

Hi!

I would like to change blocks order on mobile. On desktop the image is on the left and text on the right and that's ok but on mobile I would like the text first and the image below.

Websitehttps://entrenosotros.just-america.com/02-2020-actividades
Pass: test
Section I would like to change: section[data-section-id="5f22d4ae41363b1aac10c22a"]

Thank you very much in advanced!
 

Screen Shot 2020-07-30 at 11.39.48.jpg

Screen Shot 2020-07-30 at 11.39.59.jpg

Link to comment

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* swap block order */
div#page-section-5f22d4ae41363b1aac10c22a .span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

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

Thank you very much! It worked perfectly!

Just one more question. I will need to do it on another sections but it doesn't work just by changing the section number. I guess I should also change  something in ".span-12>.row". Is that correct? Is there a way I can do it without bothering you everytime? Thanks again!

Link to comment
Just now, Mariamabda said:

Thank you very much! It worked perfectly!

Just one more question. I will need to do it on another sections but it doesn't work just by changing the section number. I guess I should also change  something in ".span-12>.row". Is that correct? Is there a way I can do it without bothering you everytime? Thanks again!

Each section needs different code. and it seems they don't have a specific rule

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
  • 2 months later...

Hi @tuanphan - is there any way to change the order of entire sections on mobile (not just change the order of the blocks within a section)?

I'm trying to achieve the same thing as above, but i have images in a separate section to the corresponding text so trying to change the order to ensure that when it stacks on mobile, it goes...

image 
Text
Image
Text


At the moment, it goes..

 

Image
text
text
Image
Image
text

 

Thanks in advance,

Jon


 

CleanShot 2020-10-06 at 16.12.27@2x.png

Link to comment
16 hours ago, Hubbl_Marketing said:

Hi @tuanphan - is there any way to change the order of entire sections on mobile (not just change the order of the blocks within a section)?

I'm trying to achieve the same thing as above, but i have images in a separate section to the corresponding text so trying to change the order to ensure that when it stacks on mobile, it goes...

image 
Text
Image
Text


At the moment, it goes..

 

Image
text
text
Image
Image
text

 

Thanks in advance,

Jon

if anyone in future interested this, please share site url, we can help easier.

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

Hello @tuanphan

I have seen your replies on other threads relating to this subject & was wondering if you would be so kind as to help me too? :)

I'm trying to reorder blocks on mobile for this website/landing page - 

https://raspberry-sparrow-b9el.squarespace.com/
pw - wc2020

Basically I need the logo block to show at the top of the page above the pig on mobile if possible? I've tried variations of the code you have provided but I can't seem to get it to work.

I would be eternally grateful if you could give me a steer?

Thanks & best wishes,

Marie

WC holding mobile.jpg

Link to comment
23 hours ago, marie.dilworth said:

Hello @tuanphan

I have seen your replies on other threads relating to this subject & was wondering if you would be so kind as to help me too? :)

I'm trying to reorder blocks on mobile for this website/landing page - 

https://raspberry-sparrow-b9el.squarespace.com/
pw - wc2020

Basically I need the logo block to show at the top of the page above the pig on mobile if possible? I've tried variations of the code you have provided but I can't seem to get it to work.

I would be eternally grateful if you could give me a steer?

Thanks & best wishes,

Marie

Add to Home > Design > Custom CSS

/* Swap text image */
@media screen and (max-width:767px) {
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) {
    display: flex;
    flex-direction: column;
}
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) .span-2:nth-child(3) {
    order: 1;
}
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) .span-3 {
    order: 2;
}

element.style {
}
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) .span-4 {
    order: 3;
}
}

 

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

@gsheldon11 Edit your page. Click and drag near the left edge of your text block and drag to the right side of your image block until you see a guideline appear to the right of the image block, then let go.

Don't be afraid to experiment. If things get messed up, hover over Done in the upper left corner and select Discard Changes and try again.

Please see Moving blocks to customize layouts.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...

@POA

Add the following to Design > Custom CSS.

@media screen and ( max-width : 767px ) {

  [data-section-id="6031a131b065b425a5cbcdc5"] .sqs-row .sqs-row:nth-child( 3 ) {
  
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for a v7.1 site and specific to POA's needs.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@JustinSeimits

Your issue is that your images are laid out in 3 columns. You are going to want two rows.

With 3 columns on mobile the second column slides under the first and the third under the second. Hence the undesirable order.

One way to get two row is to first create a line block above your images. It will need to be the full length of the page width.

354908487_ScreenShot2021-02-24at8_53_11PM.thumb.png.ab3ac4b0a919cd94689326fd38fa44f0.png

Move the first 3 images above line.

1145455259_ScreenShot2021-02-24at8_47_58PM.thumb.png.62c6738f2f2f615771ed176a4c9252ec.png

One you have two rows with the help of the line block. Remove the line block and save.

Hopefully you've created two rows and now things will look OK on mobile.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@JustinSeimits

The lay out will be the same visually, i.e. the order of the images. The line keeps you from accidentally creating columns. It can be done without the line but you have to be hyper aware of the insertion lines.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
On 4/8/2021 at 11:58 PM, Kitley said:

Hello @tuanphan, I'm trying to do something similar. Can you help, please?

 

https://lemon-cranberry-x99z.squarespace.com/sequence-photography-moving-the-weasel

Hi. It looks like you solved this?

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
  • 1 month later...

Hi @tuanphan

I also try to re-organise my images, 

https://www.contretype.org/liste-expos

the reading direction is from left to right on the website and from column to column on mobile. Is it possible to put the same direction of display on mobile with 4 column ?

 

sorry for my bad english 

thx anyway :)

woogie 

 

Link to comment
On 5/19/2021 at 9:26 PM, wogie36 said:

Hi @tuanphan

I also try to re-organise my images, 

https://www.contretype.org/liste-expos

the reading direction is from left to right on the website and from column to column on mobile. Is it possible to put the same direction of display on mobile with 4 column ?

 

sorry for my bad english 

thx anyway :)

woogie 

 

Hi. Do/will you use Personal or Business or Commerce Plan? 

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.