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

Change block order in mobile


MaggieBovary
Go to solution Solved by tuanphan,

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 post
  • Answers 38
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* Pietro Porcinai */ div#block-yui_3_17_2_1_1586517061377_18576+.row { display: flex; flex-direction: column-

It works! Thanks a lot! 🙂

The block you need to do has no ID. div#block-yui_3_17_2_1_1587201576001_10935 is the ID of the block above + target the next block (below) of the current ID  

Posted Images

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 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 post
  • 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 post
  • 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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
6 hours ago, tuanphan said:

You mean this section?

image.thumb.png.7207bdd81d10a9c73bb5dd32258fc567.png

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

Link to post
  • 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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...