7.1 Swap block order on mobile

16 hours ago, tuanphan said:

You mean

I want photo

I want text

I believe photo

I belive text

Ready to get

Playlist

is this right?

yes that's the correct order!

18 hours ago, jesswp said:

yes that's the correct order!

Hi,

Before I check & sent the code. You can add a Line Block here, then remove it, then let me know. I will start checking the code.

On 11/8/2021 at 8:46 AM, tuanphan said:

Hi,

Before I check & sent the code. You can add a Line Block here, then remove it, then let me know. I will start checking the code.

So I was using multiple spacer blocks to split up the content (left column text / middle  spacer / right column text + playlist). I can't add a line that goes under all 3 spacer blocks/columns.

I added a line on top of the playlist but do you need a line all across? 

On 11/10/2021 at 5:18 AM, jesswp said:

So I was using multiple spacer blocks to split up the content (left column text / middle  spacer / right column text + playlist). I can't add a line that goes under all 3 spacer blocks/columns.

I added a line on top of the playlist but do you need a line all across? 

Just add a Line in screenshot postion. (Add, then remove it)

16 hours ago, tuanphan said:

Just add a Line in screenshot postion. (Add, then remove it)

 

OK I did that

On 11/7/2021 at 10:00 AM, tuanphan said:

You mean

I want photo

I want text

I believe photo

I belive text

Ready to get

Playlist

is this right?

Add to Design > Custom CSS

/* Mobile about */
@media screen and (max-width:767px) {
div#page-section-61808ee7a7077477decb9a7a>.row:nth-child(3) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61808ee7a7077477decb9a7a>.row:nth-child(3)>.span-6 .span-5 {
    display: flex;
    flex-direction: column-reverse;
}
}

@tuanphando you mind also doing the same on this page! vanityskinclinic.com

text (treatments) -photo - text (shop) -  photo 

With regards to hero banner and the intro section, do you know why the image/background aren’t splitting properly despite using the same CSS? (See attached). I’m looking for the “about” section to match the hero on mobile.

Thank you so much!!

On 11/15/2021 at 9:47 PM, jesswp said:

@tuanphando you mind also doing the same on this page! vanityskinclinic.com

text (treatments) -photo - text (shop) -  photo 

With regards to hero banner and the intro section, do you know why the image/background aren’t splitting properly despite using the same CSS? (See attached). I’m looking for the “about” section to match the hero on mobile.

 

Thank you so much!!

#1. Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-section-613aad3fe6c15c6a5b17c1e5>.row>.span-5:last-child {
    display: flex;
    flex-direction: column-reverse;
}
}

#2. You mean text on left image on right on all devices?

On 11/17/2021 at 9:48 PM, tuanphan said:

#1. Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-section-613aad3fe6c15c6a5b17c1e5>.row>.span-5:last-child {
    display: flex;
    flex-direction: column-reverse;
}
}

#2. You mean text on left image on right on all devices?

Thank you @tuanphan!

Re: #2 - similar to picture 1 (mobile). Except looking for text top, image bottom.

On 11/21/2021 at 1:37 AM, jesswp said:

Thank you @tuanphan!

Re: #2 - similar to picture 1 (mobile). Except looking for text top, image bottom.

Add to Design > Custom CSS

/* Meet clinical section on mobile */
@media screen and (max-width:767px) {
[data-section-id="613ad63cc3a1ce125ec2ad77"] {
& {
    height: 130vh !important;
    min-height: unset !important;
}
.section-background {
    height: 50vh !important;
    bottom: 0;
    top: unset;
}
.content-wrapper {
    position: relative;
    top: -20vh;
}}
}

@tuanphanWhat would the code be to have the mobile version show the steps in order 1-6?

https://beautifeyehtx.com/lash-care

PW: beautifeye

1 hour ago, geearias said:

What would the code be to have the mobile version show the steps in order 1-6?

You shouldn't need code. See some previous answers:

1 hour ago, geearias said:

What would the code be to have the mobile version show the steps in order 1-6?

You shouldn't need code. See some previous answers:

7 minutes ago, paul2009 said:

You shouldn't need code. See some previous answers:

 

Thank. you! Worked for me!

On 1/14/2022 at 3:21 PM, EleniM said:

Hello there ! I am trying to do the same but all the codes above don't seem to work !!

this is my website

https://mango-gazelle-92cm.squarespace.com/

pw: muse

[data-section-id="61e024c2e19b8f24cc2d4eee"]

#block-yui_3_17_2_1_1642081227129_15223 I'd like to show first on mobile and then #block-4d0004b72c086430143c - so basically in reverse order.

 

Can someone please please help?

 

Your site is private. Can you check?

1 hour ago, EleniM said:

It is password protected. Sorry for my late reply. 

muse

incorrect password

hey guys, i need some help as well. So for the landing page, i was thinking to rearrange the order of text and image for 2nd section. Currently in mobile it shows 

text > image 
Image > Text (want this to be text > image)
Text > image 

Website:https://www.reklaimyours.com/browser-test
Thanks! 

On 2/3/2022 at 11:56 PM, kam_2kbk said:

hey guys, i need some help as well. So for the landing page, i was thinking to rearrange the order of text and image for 2nd section. Currently in mobile it shows 

text > image 
Image > Text (want this to be text > image)
Text > image 

Website:https://www.reklaimyours.com/browser-test
Thanks! 

Hi. The url doesn't exist

Hello,
I have seen that they have helped many in the forum with the mobile version order of images and text.
I think it is great that you are doing this.
I am currently working on my website and wanted to ask if you could possibly help me with this as well? 

At the point "film" I would like to have at mobile the sequence text - button - video - text - button - video.
Currently, however, is: text - button - video - video - text - button - text - button 

would it be possible that you can help me with it somehow ? 
I also like to give you something as a thank you

Furthermore is on the starting side with the point "Leistungen" with mobile:
 Text-Button-Photo-Video-Text -Button
The right order would be Text-Button-Foto-Text -Button- Video
Could you also help me with that.

That would be so amazing. Unfortunately I am currently a bit overwhelmed with it. 

Link: https://www.nicobeckerfilm.com/ 

password: 59199

If u could help me it would be so awesome :) 

On 2/10/2022 at 3:52 PM, NicoBecker59 said:

Hello,
I have seen that they have helped many in the forum with the mobile version order of images and text.
I think it is great that you are doing this.
I am currently working on my website and wanted to ask if you could possibly help me with this as well? 

At the point "film" I would like to have at mobile the sequence text - button - video - text - button - video.
Currently, however, is: text - button - video - video - text - button - text - button 

would it be possible that you can help me with it somehow ? 
I also like to give you something as a thank you

Furthermore is on the starting side with the point "Leistungen" with mobile:
 Text-Button-Photo-Video-Text -Button
The right order would be Text-Button-Foto-Text -Button- Video
Could you also help me with that.

That would be so amazing. Unfortunately I am currently a bit overwhelmed with it. 

Link: https://www.nicobeckerfilm.com/ 

password: 59199

 

If u could help me it would be so awesome :) 

I remember I answered code in email

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-61ed656eba3f0c7869fd8003>.row:nth-child(3) {
    display: flex;
    flex-direction: column-reverse;
}
}

Hi @creedon @tuanphan or @JustinSeimits, can you please help?

As per above, I need to reposition some text in my mobile view FOOTER (As attached)

https://deep-learning-cafe.squarespace.com/ password: password123

22 hours ago, IwanJ said:

Hi @creedon @tuanphan or @JustinSeimits, can you please help?

As per above, I need to reposition some text in my mobile view FOOTER (As attached)

https://deep-learning-cafe.squarespace.com/ password: password123

 

Use this CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1653295412856_17464 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
}

2 hours ago, tuanphan said:

Use this CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1653295412856_17464 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
}

 

Thank you sssssssssssoooooooooooooooooooooo much @tuanphan

Hi @tuanphan, me again with a similar question. On my CAFE page, I need to reorder this section to move the button to the bottom after all the content...

https://deep-learning-cafe.squarespace.com/ password: password123

20 hours ago, IwanJ said:

Hi @tuanphan, me again with a similar question. On my CAFE page, I need to reorder this section to move the button to the bottom after all the content...

https://deep-learning-cafe.squarespace.com/ password: password123

I see you solved?