Change block order in mobile

8 minutes ago, SBSidekick said:

Hi @tuanphan! As always you are super helpful. Check out the page I'm having issues with: www.deatongroupllc.com/services

On desktop, looks great.

On mobile, it is currently:

• Image
• Strategy - markdown
• image
• Assessment & Action plan - markdown
• image
• Customized Service proposal - markdown
• Discovery - markdown
• image
• Business consulting - markdown
• image
• Fix-it sprint - markdown
• Image

It should be:

• image
• Discovery - markdown
• image
• Strategy - markdown
• image
• Business consulting - markdown
• image
• Assessment & Action plan - markdown
• image
• Fix-it sprint - markdown
• Image
• Customized Service proposal - markdown

I used the following CSS code but it isn't helping:

@media screen and (max-width:640px) {
   #services .sqs-row {
   display: -webkit-flex;
   -webkit-flex-direction: column-reverse;
   display: flex;
   flex-direction: column-reverse;
}
}

Can you help? Thanks!

You need to adjust your layout a bit, then I can give the CSS

1. Add Discovery, Markdown, Image

2. Add Line Block

3. Add Image, strategy, markdown

4. Add Line Block

Next

Then, remove all line blocks

Then share url again. I will give the code

28 minutes ago, tuanphan said:

You need to adjust your layout a bit, then I can give the CSS

1. Add Discovery, Markdown, Image

2. Add Line Block

3. Add Image, strategy, markdown

4. Add Line Block

Can you clarify a bit what you mean by #1 and #3? I already have those on the page. Do you want me to duplicate? Or add new?

Thanks!

3 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f47f7f3b3e6f52ce01842dd>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
/* donate page */
div#page-section-5f46b201135d856fe97b4d5d>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
}

Brilliant, thank you so so much!!!

 

On 9/9/2020 at 11:02 PM, SBSidekick said:

Can you clarify a bit what you mean by #1 and #3? I already have those on the page. Do you want me to duplicate? Or add new?

Thanks!

If you can insert Line Block, then the layout is correct to use the code. If you can't insert Line Blocks, recreate them and follow the instructions I wrote above.

Hi @tuanphan - it looks like you are the wizard I need to talk to. I am having a similar problem as everyone else. I've tried the code you've used for them with my block id in place, but I'm having no luck. Could you help me as well?

The site I'm working on is https://www.nkstudiosbingen.com/welcome

The blocks I am trying to rearrange for mobile are down under the instructors - specifically Kristin's. I'd like the mobile version to be Name > Paragraph > Image > Name > Paragraph > Image > Name > Paragraph > Image.

Thanks for any assistance!

Ryen

Add to Home > Design > Custom CSS

@media screen and (max-width: 640px) {
    div#block-yui_3_17_2_1_1603289703342_10296+.row {
        display:flex;
        flex-direction: column-reverse
    }
}

On 4/24/2020 at 11:06 AM, tuanphan said:

@media screen and (max-width:767px) {
/* ambienti */
div#block-yui_3_17_2_1_1587201576001_10935+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

hi!1 i tried this with mine but is no doing anything i obviously changed the block id but nothing 

https://nest-wellness.com/home

Im trying to get her image to pop before text in mobil 

thanks 

1 hour ago, jennypetit said:

hi!1 i tried this with mine but is no doing anything i obviously changed the block id but nothing 

https://nest-wellness.com/home

Im trying to get her image to pop before text in mobil 

thanks 

Add to Home > Design > Custom CSS

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

On 11/3/2020 at 4:00 PM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

I chagned something underneith and now the code is no working is it the row?

9 hours ago, jennypetit said:

I chagned something underneith and now the code is no working is it the row?

I see fine here. Do you still need help?

1 hour ago, tuanphan said:

I see fine here. Do you still need help?

oh yes it works it wasn´t showing me. how can i do the same on the recipes section? on other page i coppy the collection reference and swap it for the page number in the code but that was a bad guess :) https://www.nest-wellness.com/shoppage

1 hour ago, jennypetit said:

oh yes it works it wasn´t showing me. how can i do the same on the recipes section? on other page i coppy the collection reference and swap it for the page number in the code but that was a bad guess :) https://www.nest-wellness.com/shoppage

You mean this section?

6 hours ago, tuanphan said:

You mean this section?

yes this section

also sense you are here could you please help me make smaller the gallery carrusel on the top  /home page. thank you millions you life saver

On 11/7/2020 at 2:03 AM, jennypetit said:

yes this section

also sense you are here could you please help me make smaller the gallery carrusel on the top  /home page. thank you millions you life saver

Add to Home > Settings > Advanced > Code Injection > Footer then save & check on real mobile

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
if ($(window).width() <= 767) {
$('div#block-yui_3_17_2_1_1604497100986_435387').insertBefore('div#block-yui_3_17_2_1_1604497100986_113386');}
});
</script>

I actually have a similar issue, but have not been capable of follow this strategy to my pages of private tutor. There are too many block IDs, I do not know which one to specify inside the code for private tutoring. On every of those  pages in cellular view

@lkhase33

Please post the URL for your site. It is hard to help when we can't see what you are talking about.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Also could you describe in more detail what effect you want to achieve? I'm unclear as to what you want changed and how.

15 hours ago, tuurfv said:

Hello Team Squarespace!

I have the same question as others asked above.
I would like for this image (which is positioned left on web-version and therefore above at mobile version) to appear below the text on mobile version.

So, on mobile version I would prefer:
text
image

instead of:
image
text


I added some images to show what I mean.
My website is www.tuurfransvermeiren.com

Thanks in advance! 🙂

 

Try adding to Home > Design > custom CSS

/* text image order */
@media screen and (max-width:767px) {
div#page-section-5f9c7330537b8e673b5d620c>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Hi @tuanphan i have the same problem in this section https://www.jennypetit.com/letsdesign#packitup

thanks in advance 

33 minutes ago, jennypetit said:

Hi @tuanphan i have the same problem in this section https://www.jennypetit.com/letsdesign#packitup

thanks in advance 

You want, on mobile, image-text-image-text or text-image-text-image?

19 minutes ago, tuanphan said:

You want, on mobile, image-text-image-text or text-image-text-image?

i want image text, image text like the ones above squarespace should really figure this one out always happens when the image is on the right 
thank you

Hi @tuanphan I have the same problem an I am trying to have my phiotos in order on mobile left right left right but couldn't manage to. Which block ID should I put to make sure 2 appear after 1 etc?  I have tried the CSS but it doesnt work i dont know what to do anymore 

the URL is:

https://millimetrearchitecture.com/online-design

Can some help please? Thank you so much !!!!

On 12/16/2020 at 6:14 AM, jennypetit said:

i want image text, image text like the ones above squarespace should really figure this one out always happens when the image is on the right 
thank you

You have problem with pack it up text & image?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1608069136903_24669+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

1 hour ago, paulineg said:

Hi @tuanphan I have the same problem an I am trying to have my phiotos in order on mobile left right left right but couldn't manage to. Which block ID should I put to make sure 2 appear after 1 etc?  I have tried the CSS but it doesnt work i dont know what to do anymore 

the URL is:

https://millimetrearchitecture.com/online-design

 

Can some help please? Thank you so much !!!!

No need to use code, you need to adjust layout a bit

Step 1. Add image 1, image 2

Step 2. Add a Line Block

Step 3. Add image 3, image 4

Step 4. Add a Line Block

Repeat

Final, remove all Line Blocks & check again on mobile

Omg @tuanphan You are a STAR!! thank you so much!!! can't believe square space support was not able to tell me this! Thank you so much!!🙏

32 minutes ago, paulineg said:

Omg @tuanphan You are a STAR!! thank you so much!!! can't believe square space support was not able to tell me this! Thank you so much!!🙏

I see some text disappear on footer tablet.