How can I apply CSS styling to a specific block?

Store Design
1

Hi Guys

I need to style a certain block, what is the correct code please:

#data-theme-editor-block-38162849744="{"id":"1602838770919","type":"text-columns"}" {
        margin-top: -250px !important;
    }

Thanks

2

@jamescox1981 Please provide a link to your store, and a screenshot of the block you want to style.

3

Hi

Page: https://projectfib.myshopify.com/admin/themes/111978610853/editor#/collections/all-products/products/plant-based

Password: Fib01!

Just this block:

Screenshot 2020-10-16 at 10.30.18.png
Screenshot 2020-10-16 at 10.30.18.png3160×1700 345 KB

Thanks!

4

Hi @jamescox1981

The below section relates to that picture, although this will effect the others aswell, give the section another class to make it unique.

.index-section.index-section--alt {
}
5

The correct selector for that element is .index-section .index-section–alt

To style it you would need to use the following

.index-section .index-section--alt.{
   margin-top: -250px !important;
}

Please note this element does not have a unique identifier so this will style other instances of this block. If you want to target only this block you will have to add an id.

6

Thanks - can i not use the id in the string:

#data-theme-editor-block-38162849744="{"id":"1602838770919","type":"text-columns"}"
7

Hi @jamescox1981

There’s no id on that section, where did you find that?

8

@jamescox1981 no you cannot. It looks like you have copied this from inside the theme editor.

If you are going to use inspect element to find the selectors you have to use it on the customer-facing view of your website.

9

ok - I used my dev tool selector to find it - noted i should use the customer view.

How would i add an ID to this div if it is auto generated by the theme customisation menu? Do you know what liquid file would i have to amend?

Thanks

10

@jamescox1981 There is a simpler solution that may be more appropriate for you, but taking this route would mean changing your blocks would require your to update the code.

.page-blocks > div:nth-child(2) > div{
   margin-top: -250px !important;
}

if you reorder or change the block you will have to change the number in the :nth-child(change).

11

Many thanks!