Dominique_48 Posted January 24, 2022 Posted January 24, 2022 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} }*/
Beyondspace Posted January 24, 2022 Posted January 24, 2022 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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!
tuanphan Posted January 25, 2022 Posted January 25, 2022 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 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!)
Dominique_48 Posted January 25, 2022 Author Posted January 25, 2022 thank you so much, will give it a go.
Dominique_48 Posted January 26, 2022 Author Posted January 26, 2022 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.
Dominique_48 Posted January 26, 2022 Author Posted January 26, 2022 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.
tuanphan Posted January 28, 2022 Posted January 28, 2022 (edited) 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). Edited January 28, 2022 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!)
Dominique_48 Posted January 28, 2022 Author Posted January 28, 2022 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.
tuanphan Posted January 29, 2022 Posted January 29, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment