7.1 Swap block order on mobile

On 5/26/2021 at 11:19 AM, tuanphan said:

You want this direction?

Yes exactly 🙂

🖐️ @tuanphan

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

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

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

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 

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

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

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

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.

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.

@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 😉 

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 ♥

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

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!

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!

 

 

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

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!

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.

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

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

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!

 

Try this CSS

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

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? 

On 10/7/2021 at 11:46 PM, jesswp said:

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

Add new code

div#page-section-614a78e4ee606b6b17a08e08 {
    background-color: white;
    padding: 20px;
}

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!

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!

You mean

I want photo

I want text

I believe photo

I belive text

Ready to get

Playlist

is this right?