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

Change block order in mobile


MaggieBovary

Question

Site URL: https://villa-rondinelli.squarespace.com/

Hi all,

in a couple of pages of my website the mobile version swapped some of the blocks order:

- here: https://villa-rondinelli.squarespace.com/storia

- and here: https://villa-rondinelli.squarespace.com/ambienti

password: maggie-villa

There should be the text first and then the image throughout the page.

 

I tried so many different solutions and nothing seems to work 😕 I thought I could solve it with 'flex-direction: column-reverse' but I couldn't manage to select a specific block as some of them don't have IDs, so it selects all the items with the same class name.

 

Any suggestion on how to solve this and, in general, how to select a tag that does't have a specific ID without selecting all the tags with the same name?

Thanks!

 

Link to comment

Recommended Posts

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

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

 

 

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

image.thumb.png.7207bdd81d10a9c73bb5dd32258fc567.png

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

 

1.jpg

2.jpg

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

 

1.jpg

2.jpg

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
4 hours ago, tuanphan said:

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

 

Works perfectly, thanks.
Your assistance is much appreciated!

Have a nice day,
T

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

mobile.JPG

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

mobile.JPG

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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