Jump to content

Image order display on mobile incorrect

Recommended Posts

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

KH screenshot desktop view.jpg

KH screenshot mobile view.jpg

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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

KH screenshot desktop view.jpg

KH screenshot mobile view.jpg

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

layout.thumb.png.eeab9e9b2b4dae7f36c29881e6a0545b.png

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

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.

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

KH screenshot line block desktop view.jpg

KH screenshot line block mobile view.jpg

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

layout.thumb.png.eeab9e9b2b4dae7f36c29881e6a0545b.png

Edited by tuanphan

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.