Dominique_48 Posted January 24, 2022 Share 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} }*/ Link to comment
Beyondspace Posted January 24, 2022 Share 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) 🗓️ 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
Dominique_48 Posted January 24, 2022 Author Share Posted January 24, 2022 Thanks. 53!Stock is password Link to comment
tuanphan Posted January 25, 2022 Share 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 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
Dominique_48 Posted January 25, 2022 Author Share Posted January 25, 2022 thank you so much, will give it a go. Link to comment
Dominique_48 Posted January 26, 2022 Author Share 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. Link to comment
Dominique_48 Posted January 26, 2022 Author Share 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. Link to comment
tuanphan Posted January 28, 2022 Share 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 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
Dominique_48 Posted January 28, 2022 Author Share 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. Link to comment
tuanphan Posted January 29, 2022 Share 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment