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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.