creedon Posted May 15, 2022 Share Posted May 15, 2022 (edited) Please see Row Column Finder. From the read me. It is quite easy to get into a situation where blocks are not behaving the way you think they should. Some of those issues are a how you think they should work versus how they actually work. But one issue that is really hard to tell is nested blocks which are virtually undetectable visually. The following image shows two similar looking page sections. The target layout is a row with three evenly spaced columns of text. Although they appear to be similar visually. They are not structurally. With the Row Column Finder bookmarklet you begin to have a chance at detecting layout issues that may be making your blocks behave in unexpected ways or are difficult to work with using CSS or JavaScript. In the first page section we see the target layout as desired. The second page section does not meet our target layout. We have a row with two columns. The first row first column contains a row with two columns. Undesirable nesting! What is a bookmarket? Wikipedia has a nice entry on bookmarklet. Edited May 21, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 (edited) Great. I encountered a lot of cases like this on the Forum. And in some cases, it is difficult to explain because the member does not know the code. I took some time to understand your post. To install Row Column Finder code, follow these 1. Click 3 dots on right of your browser > Click Bookmarks > Bookmark Manager 2. Next, look right and click 3 dots 3. Enter Name: Row Column Finder URL: Copy raw code in this url and Save 4. Go to a page in a site > Choose Bookmarks > Click Row Column Finder Edited May 15, 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!) Link to comment
creedon Posted May 16, 2022 Author Share Posted May 16, 2022 (edited) 4 hours ago, tuanphan said: I encountered a lot of cases like this on the Forum. And in some cases, it is difficult to explain because the member does not know the code. It's a real problem with the SS layout editor! A member was having an issue yesterday with the arrangement of their blocks when the viewport got small and the blocks did not collapse/flow as they expected. The first thing I always check for is the unseen nesting issue. When I find it I kind of groan to myself because as you say explaining it to the average user is very difficult! I usually try to take screenshots of the nesting happening but that probably doesn't help most folks. Well my groan turned into there has to be a better way to help with visualizing the issue and thus my code was born! 🙂 Edited May 16, 2022 by creedon tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted May 21, 2022 Author Share Posted May 21, 2022 (edited) Man it was so much easier explaining rows and blocks to a member. Hopefully it is easier for them to understand! 🙂 With my bookmarklet I could easily tag the elements, snap off some screenshots and show the issues with some explanatory text. Edited May 21, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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