How can I locate and edit an inline style in my CSS code?

Technical Q&A
1

Hi, I am trying to edit this:

.flex-grid–template–14456386945107__1650550982d5f6b0ba

with CSS but, I cant seem to find it in my code files. When i look in the firefox style editor, I can see it is located in <inline style sheet #5>

Does anyone know where I can find this and how to edit this? Thank you.

2

171632

3

That style be generated inside the section file (sections/xxx.liquid)

In the code you will only see this .flex-grid–template–

the long number after that is the dynamic section id

4

Okay got it, but if I only want to change that one container, how do I specify that when changing the css?

5

Because when I look in the style editor you can see that there are padding levels added but when I was trying to look in the css files I couldn’t see that but maybe I didn’t look in the right spot

6

You should find in the sections/xxx.liquid file instead of css file

And maybe there spacing can be managed on the Theme Customize (depend on the theme you are using)

You should attach image for more information

7

Thank you, I’ll take a look and let you know

8

I cannot find it in the sections.

Here is a picture of the container I am looking to change.

Can you take a look and see if you can find it?

Screenshot 2022-04-21 085204.png
Screenshot 2022-04-21 085204.png1908×1031 515 KB

9

Since I can’t access to see your souce code, I guess there may be a file name promo-grid.liquid (or something similar)

You can open that file and then search for the word

.flex-grid–template

or

.flex-grid–template–{{ section.id }}