0

I'm editing an existing website's footer to match the width of the part above it. That line is grayed out in Chrome web inspector. How do I find the CSS which informs this width?

enter image description here

What does it mean when a CSS rule is grayed out in Chrome's element inspector? answers the question of why this is happening, but now how to solve it.

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Sidereal
  • 111
  • 3

1 Answers1

0

You are looking at the Computed tab, which is completely different than the Styles one the other Q/A was referring to.

In the Computed tab, you get the same results as if you called getComputedStyle on the element. As you may know, these values are not necessarily the authored ones.

A greyed out value there means that this value has not been assigned by any explicit rule, but for instance here, it's because the content of the page made it have a computed width of 981px. If you did set a rule on this element, you would have had the collapsible menu telling which rule has been applied.

.with-rule {
  width: auto; /* even if authored as auto */
}
<div class="no-rule">My width will be greyed out in the Computed Tab</div>
<div class="with-rule">I will have  a collapsible menu</div>

Now maybe you should prefer the Styles tab, which will give you more information about the actual rules that are applied on your element.

Kaiido
  • 123,334
  • 13
  • 219
  • 285