Row Column Finder

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.

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

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! 🙂

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.