Madelyn 0 Share Posted September 30, 2020 Site URL: https://www.tikipartyrentals.com/pricing-parties-1 Hello! I have been reading around the forum to try to find a quick fix to reordering image blocks on my client's website so they go in the correct order across all formats, but cannot seem to get it right. The issue I'm having is that the images I have ordered correctly for desktop and tablet are becoming out of order on the mobile version. For example, my desktop version looks like this: Image 1 - Image 2 Image 3 - Image 4 ... But on mobile, it looks like: Image 1 Image 3 Image 2 Image 4 I know I need custom CSS to solve this but am not sure exactly what that would be. Any help provided would be greatly appreciated! Thanks in advance! Link to post
tuanphan 8,979 Share Posted October 1, 2020 No need to use CSS. You need to adjust layout a bit First, add Image 1, text 1, image 2, text 2 Next, add Line Block Next, add Image 3, text 3, image 4, text 4 Next, add Line Block ... Then remove all Line Blocks. Done. SusanaR 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Madelyn 0 Author Share Posted October 14, 2020 On 10/1/2020 at 6:49 PM, tuanphan said: No need to use CSS. You need to adjust layout a bit First, add Image 1, text 1, image 2, text 2 Next, add Line Block Next, add Image 3, text 3, image 4, text 4 Next, add Line Block ... Then remove all Line Blocks. Done. Thanks for this suggestion. Unfortunately, it did not work with my website. Text and images are still appearing out of order Link to post
SusanaR 48 Solution Share Posted October 15, 2020 Hey @Madelyn, I can confirm you won't indeed need code for what you are trying to achieve. The order of your blocks will depend on the structure of your columns and rows. Here's a Squarespace help article that covers this in more detail:Page and block layout changes on mobile devices This guide also has a help video at the top, which explains how can you get the desired order of your blocks when your site is viewed on a mobile device. For any further questions/assistance, reach out to Squarespace Customer Support, who is available 24/7 and happy to offer personalized assistance. Link to post
iamraag 0 Share Posted January 3 @Madelyn Having the same issue. Did you find a solution? Link to post
tuanphan 8,979 Share Posted January 4 21 hours ago, iamraag said: @Madelyn Having the same issue. Did you find a solution? If you share site url, we can help easier You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
iamraag 0 Share Posted January 4 @tuanphan Site url is https://www.madebydot.tv We're actually already discussing this on a separate thread - You fixed the issue for the very first two projects under 'Featured work'. But I was looking to do the same for ALL projects after the 'Our clients' section as well. Let me know. Link to post
tuanphan 8,979 Share Posted January 7 On 1/5/2021 at 1:58 AM, iamraag said: @tuanphan Site url is https://www.madebydot.tv We're actually already discussing this on a separate thread - You fixed the issue for the very first two projects under 'Featured work'. But I was looking to do the same for ALL projects after the 'Our clients' section as well. Let me know. Add this under current code @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1608630180737_34906+.row, div#block-yui_3_17_2_1_1608452593373_158208+.row, div#block-yui_3_17_2_1_1608452593373_278908+.row { display: flex; flex-direction: column-reverse; } } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
iamraag 0 Share Posted January 8 @tuanphan I need to do that for a couple of more items on my website - Could you tell me how you find the block# or the code to target a specific row here? Would love to learn this trick myself so I can keep fixing it whenever I notice an issue. Link to post
tuanphan 8,979 Share Posted January 9 10 hours ago, iamraag said: @tuanphan I need to do that for a couple of more items on my website - Could you tell me how you find the block# or the code to target a specific row here? Would love to learn this trick myself so I can keep fixing it whenever I notice an issue. For non-coders, try this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
rcdep 0 Share Posted January 13 I know that some have already resolved this but, as I beat my head against the same problem and eventually found a really simple solution, I thought I should still share it here. The trick is to place your images INSIDE your text boxes which you can do by dragging and dropping into the shaded box on whichever side you want to place them, rather than placing them in the block order as separate items. Resize as required and then place the whole box with the text and image as desired. Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment