Jump to content

Recommended Posts

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.

849468374_sectionsappearsimilar.thumb.png.840deade0987143e6d89aa81569d3250.png

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.

1851530846_sectionsaredissimilar.thumb.png.df407ae4afe7a59abe10aff047515f9b.png

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

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

bookmarklets1.thumb.png.cc4191302dc9d711b0fc5c6782fd6500.png

 

2. Next, look right and click 3 dots

bookmarklets2.thumb.png.b069159c780770ca19557cc03af010f5.png

 

3. Enter

  • Name: Row Column Finder
  • URL: Copy raw code in this url

and Save

bookmarklets3.png.009fc10113e822f43bbf078908914e69.png

 

4. Go to a page in a site > Choose Bookmarks > Click Row Column Finder

bookmarklets4.thumb.png.f84fc4bbbd83e6274674caeda19defdf.png

Edited 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
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 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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.