Image order display on mobile incorrect

Site URL: https://blenny-bluebird-terj.squarespace.com/config/design/custom-css

I have created code blocks with image hover and link to second page for 7 art prints.  

On desktop they are displaying correctly from left to right eg 1, 2, 3. On mobile, they follow in built squarespace order which seems to go from top to bottom eg 1, 4 ,2, 5.

The code at bottom in blue is where I have tried to use flex wrap and order value to affect order display on mobile but it has not worked. 

Any help would be greatly appreciated. Many thanks.

}
#img-hover-one{
  background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61e72dc9c78a8405d7deee0f/1642540493980/KHXBendOneCrop.png');
height:20.8vw;
width:28.1vw;
background-size:contain;}
#img-hover-one:hover{
  background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61dc4285b981d80d59ca18bc/1641824912750/KHXBendOneShineCropLH.png')
} 

<a href="/bend-one">
  <div id="img-hover-one"></div>
  <div class=figure>
      <p>Bend One
  </div>

#page-section-61dc9320e7386f52677ca8df {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/* @media screen and (max-width: 768px)  
{ 
  display: flex; flex-flow: row wrap; }
    .image-hover-one { order: 1 }
    .image-hover-two { order: 2  }
    .image-hover-three { order: 3 }
    .image-hover-four { order: 4 }
    .image-hover-five { order: 5 }
      .image-hover-six {order: 6}
}*/

56 minutes ago, Dominique_48 said:

Site URL: https://blenny-bluebird-terj.squarespace.com/config/design/custom-css

I have created code blocks with image hover and link to second page for 7 art prints.  

On desktop they are displaying correctly from left to right eg 1, 2, 3. On mobile, they follow in built squarespace order which seems to go from top to bottom eg 1, 4 ,2, 5.

The code at bottom in blue is where I have tried to use flex wrap and order value to affect order display on mobile but it has not worked. 

Any help would be greatly appreciated. Many thanks.

 

}
#img-hover-one{
  background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61e72dc9c78a8405d7deee0f/1642540493980/KHXBendOneCrop.png');
height:20.8vw;
width:28.1vw;
background-size:contain;}
#img-hover-one:hover{
  background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61dc4285b981d80d59ca18bc/1641824912750/KHXBendOneShineCropLH.png')
} 

<a href="/bend-one">
  <div id="img-hover-one"></div>
  <div class=figure>
      <p>Bend One
  </div>

#page-section-61dc9320e7386f52677ca8df {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/* @media screen and (max-width: 768px)  
{ 
  display: flex; flex-flow: row wrap; }
    .image-hover-one { order: 1 }
    .image-hover-two { order: 2  }
    .image-hover-three { order: 3 }
    .image-hover-four { order: 4 }
    .image-hover-five { order: 5 }
      .image-hover-six {order: 6}
}*/

Your site is still private now. Kindly give it a protected password so we can take a look

Thanks.

53!Stock is password

16 hours ago, Dominique_48 said:

Thanks.

53!Stock is password

Try recreating your layout

Add Image 1, 2, 3

Add a Line Block

Add Image 4, 5, 6

Add a Line Block

...

Final, remove all Line Blocks

Then check again on mobile

thank you so much, will give it a go.

I have tried line block, once all 3 images are in line then the line block breaks up into 3 sections and I cannot override it. It does not help order display on mobile.

Any other ideas re display order on mobile?

Many thanks.

Would it be possible for my homepage to have two display options ie if your screen size is large (desktop) show x if your screen space is small (mobile) show y?

How do I tag these two options so that it automatically shows the right one?

In large view I will have 3 columns, 3 rows.

In small I want to manually reconfigure so I have one column and 7 rows with display order that I can set.

On 1/26/2022 at 7:09 PM, Dominique_48 said:

I have tried line block, once all 3 images are in line then the line block breaks up into 3 sections and I cannot override it. It does not help order display on mobile.

Any other ideas re display order on mobile?

Many thanks.

Add 01 Line Block, not 3. See below screenshot

I have solved hundreds of cases just like yours. The best way is to use Line Block, if you don't like adding line blocks, you can use JavaScript to change their order on mobile, but it will definitely require a lot of code/take a lot of time. (And if you delete/add a block, you will need to update all the code again). 

thanks again.

I would really like the line block option to work but the line gets cut into 3 according to columns , I am not able to get one line to go all the way across.

Today I faced a similar problem, so I made a video, you can see here. https://www.loom.com/share/cffc6416f2034417b4156367424e0b2a