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

7.1 Swap block order on mobile


Mariamabda

Question

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

Recommended Posts

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

Link to comment
  • 0
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.

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

Link to comment
  • 0
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.

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

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

Link to comment
  • 0
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.

 

 

Link to comment
  • 0
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.

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

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

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

Link to comment
  • 0
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.

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

Link to comment
  • 0
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.

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

Link to comment
  • 0
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;
}

 

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

Create an account or sign in to comment

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

×
×
  • Create New...