Jump to content

7.1 Swap block order on mobile

Recommended Posts

Posted
On 7/30/2020 at 5:40 PM, tuanphan said:

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;
}
}

 

Hi @tuanphan

I am struggling with the same problem. Could you help me to find the proper codes?

https://www.real-identity.ch/

PW: birdhouse

I want to have the following order in mobile:

- team: always portrait > text, portrait > text...

- home section services: graphical element > text, graphical element > text...

Many thanks for your help and kind regards

Sibylle

Posted
On 5/31/2021 at 7:00 PM, orneverornow said:

Hi @tuanphan

I am struggling with the same problem. Could you help me to find the proper codes?

https://www.real-identity.ch/

PW: birdhouse

I want to have the following order in mobile:

- team: always portrait > text, portrait > text...

- home section services: graphical element > text, graphical element > text...

Many thanks for your help and kind regards

Sibylle

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* team */
div#page-section-60702b75f0b59828641e5d95 .span-12>.row:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
div#block-yui_3_17_2_1_1618583688705_52632+.row, div#block-yui_3_17_2_1_1617962790299_23249+.row, div#block-yui_3_17_2_1_1620635631890_46648+.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

If it works, let me know. I will check homepage

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

Posted
21 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Mobile */
@media screen and (max-width:767px) {
/* team */
div#page-section-60702b75f0b59828641e5d95 .span-12>.row:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
div#block-yui_3_17_2_1_1618583688705_52632+.row, div#block-yui_3_17_2_1_1617962790299_23249+.row, div#block-yui_3_17_2_1_1620635631890_46648+.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

If it works, let me know. I will check homepage

Hi @tuanphan!

Thank you so much. It works perfectly for the team page. Could you also please send me the code for the homepage? The graphical elements under REAL competence should always come before the text.

Many thanks and kind regards

Sibylle

Posted
On 6/2/2021 at 7:40 PM, orneverornow said:

Hi @tuanphan!

Thank you so much. It works perfectly for the team page. Could you also please send me the code for the homepage? The graphical elements under REAL competence should always come before the text.

Many thanks and kind regards

Sibylle

Add to Design > Custom CSS

/* Mobile-Home-Order */
@media screen and (max-width:767px) {
div#block-048ca2e0eded4950bb70+.row, div#block-339fcaacff2248dafd8c+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            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!)

Posted
22 hours ago, wogie36 said:

Hi @tuanphan

have you an idea about my issue ?

I saw it work but only for 2 columns, that's correct ? 

Its not possible with more columns ?

Already Thanks  

Wogie 

Your case is very complex, need to use JS to move each image. Each image will need a code.

Can you add me as a contributor? I will test some other approach

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

Posted
On 6/4/2021 at 11:48 AM, tuanphan said:

Add to Design > Custom CSS


/* Mobile-Home-Order */
@media screen and (max-width:767px) {
div#block-048ca2e0eded4950bb70+.row, div#block-339fcaacff2248dafd8c+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Hi @tuanphan

It works, thank you so much!!!!!!!

Posted
On 5/26/2021 at 11:19 AM, tuanphan said:
  On 6/3/2021 at 12:58 PM, wogie36 said:

Hi @tuanphan

have you an idea about my issue ?

I saw it work but only for 2 columns, that's correct ? 

Its not possible with more columns ?

Already Thanks  

Wogie 

Your case is very complex, need to use JS to move each image. Each image will need a code.

Can you add me as a contributor? I will test some other approach

@tuanphan I can let you try some other approach but if you find a way with JS, do you think I can copy your  JS process by myself in the future ? Because a lot of image will come in the future.

 

 

Posted
20 hours ago, wogie36 said:

@tuanphan I can let you try some other approach but if you find a way with JS, do you think I can copy your  JS process by myself in the future ? Because a lot of image will come in the future.

 

 

Each situation will need a different JS. And especially, if you delete or move a block, you may need to update the entire JS code.

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

Posted

@tuanphanit seem to be difficult on the long term. A bit sad but thanks anyway tuanphan.

Do you think its possible to manage the code with some very little knowledge of coding ? or it's advanced coding knowledge?

thx 😉 

  • 2 months later...
Posted
On 8/27/2021 at 7:00 PM, domofash_ said:

Hi @tuanphan i need help also this link pw:123 

 the section with Angelique for mobile i'd like to reverse the order so instagram grid is under her photo card ♥

Answered your message. You can check again

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

  • 3 weeks later...
Posted
On 9/14/2021 at 7:54 PM, nataliaswarz said:

Hi @tuanphan! Can you help me with mine please?

For the footer in mobile only, https://monicamojica.squarespace.com/

This is the order I'd like to achieve + make the instagram block align in one line only.

Thanks in advance!

 

 

Screenshot 2021-09-14 at 14.53.29.png

Add to Design > Custom CSS

/* Mobile Footer Order */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1630780782396_9645+.row {
    display: flex;
    flex-direction: column;
}
/* image */
div#block-yui_3_17_2_1_1630780782396_9645+.row .span-6 {
    order: 1;
}
/* top links */
div#block-yui_3_17_2_1_1630780782396_9645+.row .span-3:first-child {
    order: 2;
}
/* bottom links */
div#block-yui_3_17_2_1_1630780782396_9645+.row .span-3:last-child {
    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!)

  • 2 weeks later...
Posted
On 7/30/2020 at 11:40 AM, tuanphan said:

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;
}
}

 

Hey @tuanphan! Do you mind letting me know how to achieve the mobile block swap function below? I am looking to have image shows first, then the description + button.

https://platinum-goldfish-ewl6.squarespace.com/treatments
pass: skin

In some other threads, I notice you use a single block ID to identify. How would this work in my case as there are multiple block ID (Title text block, line block, description text block and button block)

Thanks so much!

Posted
On 9/27/2021 at 7:49 AM, jesswp said:

Hey @tuanphan! Do you mind letting me know how to achieve the mobile block swap function below? I am looking to have image shows first, then the description + button.

https://platinum-goldfish-ewl6.squarespace.com/treatments
pass: skin

In some other threads, I notice you use a single block ID to identify. How would this work in my case as there are multiple block ID (Title text block, line block, description text block and button block)

Thanks so much!

Add to Design > Custom CSS

/* Treatments image text order mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632702196855_20283+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(5) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(7) {
    display: flex;
    flex-direction: column-reverse;
}
}

Each section needs a different combination. It is very difficult to Explain. If you have a problem, just post it on the forum, we're always here to help.

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

Posted
12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Treatments image text order mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632702196855_20283+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(5) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(7) {
    display: flex;
    flex-direction: column-reverse;
}
}

Each section needs a different combination. It is very difficult to Explain. If you have a problem, just post it on the forum, we're always here to help.

You are awesome. Thanks so much!! 

Posted
On 9/29/2021 at 6:24 AM, jesswp said:

@tuanphan Unrelated but same site. Is there a way to put a background on just this one block? I am using a plugin that's pulling this content from a summary block.

Attaching what I am looking to achieve on the main page

https://platinum-goldfish-ewl6.squarespace.com/
skin

Appreciate it!

 

Screen Shot 2021-09-28 at 7.23.47 PM.png

Try this CSS

div#block-yui_3_17_2_1_1632273069150_6340+.row {
    background-color: white;
}

 

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

Posted
On 10/2/2021 at 4:20 AM, tuanphan said:

Try this CSS

div#block-yui_3_17_2_1_1632273069150_6340+.row {
    background-color: white;
}

 

Thanks! How can we include the line and the title a well? 

  • 4 weeks later...
Posted
On 11/5/2021 at 9:44 AM, jesswp said:

Hey @tuanphan! Looking to swap order for a few of the blocks... do you mind helping?

https://snail-sprout-zgz3.squarespace.com/about
pass: workout

Black section towards the middle/bottom -- Looking to swap picture #2 with "get ready to bounce on".

Order should go photo #1, text, photo #2, "text, "title header: get ready to bounce", spotify playlist.

Thanks so much!

Screen Shot 2021-11-04 at 10.41.40 PM.png

Screen Shot 2021-11-04 at 10.41.45 PM.png

You mean

I want photo

I want text

I believe photo

I belive text

Ready to get

Playlist

is this right?

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

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.