How do you target a specific row/ find the row's block id?

Site URL: https://www.jeremyleegibbs.com/

I have set all of the rows on my site to be horizontally  and vertically centered using flex boxes. However, there are a couple places where I would like the items in a single row to be flex start, such as rows with text here https://www.jeremyleegibbs.com/materials . How do you find the static row ID that will not change when the page is reloaded?

The easiest way to find the block number:

If you’re using Google Chrome, download this Squarespace Block Identifier extension for Chrome. This extension is designed to help you find the Block Identification Number of each Block on your Squarespace Site.

Open up the page with the block you want to identify, click on the Identifier Tool in your Chrome Extensions and it will instantly reveal the Block Identification Numbers (which will be something like #block-53c818fd6d3f39517aed or #block-yui_3_17_2_1_1556302617094_72323)

Click on the Block you want to use and it will automatically copy the Block number for you!

If you don’t use Google Chrome:

Firstly, I recommend downloading it even if it’s just to use this extension, it will save you a bunch of time.

Otherwise, you can right click on the block and then click Inspect. Somewhere in the code for that certain object it will say ID=block etc. Though there are a lot of “ID’s” so make sure you look for the correct one, it needs to start with block.

TIP: Make sure the Block number starts with Block. If it starts with anything else, it’s not the correct ID.

Hey thanks for the help!

I can find the block identifiers for the individual boxes, pages, and collections, but not one that represents an entire row. All of the rows seem to only be yui. Is a row identified differently?

Thank you Tuanphan! It works perfectly!

@Tuanphan,

This is great—but the "row" part of your selector didn't work for me. Instead, I had to use "div":
I'm using 7.0 — maybe that's the difference?

#your-spacer-block-id + div {
  your css code
}

As a note—I can never seem to get the right block I'D without using this browser extension:
Squarespace ID Finder

I put the spacer directly above the row I wanted (it's important to check the "Elements" in your browser inspector to make sure it's correctly placed before (above) the row you want to select.

@peach

Please post the URL for the page on your site where this effect should occur.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Quote

As a note—I can never seem to get the right block I'D without using this browser extension:

What other method(s) do you try to use that don't work? Using the inspector?

On 10/23/2020 at 11:57 AM, tuanphan said:

Row has no id.

You can add a spacer block above row, then target spacer block id, then use this code to target row

#spacer-block-id + row {
css code
}

 

Hi, I tried this and it didn't work for me, any idea why?

#block-yui_3_17_2_1_1653562497252_8176 + row{
  .sqs-row {
    display: flex;
    flex-direction: column-reverse;
  }
}

https://synthesizer-helicon-94zy.squarespace.com/

password: gloo

6 hours ago, abibacon said:

Hi, I tried this and it didn't work for me, any idea why?

#block-yui_3_17_2_1_1653562497252_8176 + row

This selector means find the block id then a row sibling. Blocks do not have have row siblings.

Also note that spacer blocks do not have any layout rows or columns so there is nothing to target in them except a single div.