Jump to content

7.1 Swap block order on mobile

Recommended Posts

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.

image.thumb.png.f8802f28bb00d6eb2002820793e5e9fd.png

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? 

Link to comment
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)

 

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

 

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

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

B964FC79-C7E7-41F7-93F0-48ECD765F46D.png

3BB28E2E-6D54-4465-AF67-855104DE2316.png

Edited by jesswp
Link to comment
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!!

B964FC79-C7E7-41F7-93F0-48ECD765F46D.png

3BB28E2E-6D54-4465-AF67-855104DE2316.png

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

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

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

 

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

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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:

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 weeks later...
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?

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

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,
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 :) 

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

 

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

 

Capture8.PNG

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

 

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

Link to comment
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

Capture11.PNG

I see you solved?

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.