csscss-selectorscss-specificitytimeline.js

How to identify where my CSS selector is being overriden from? Timeline.js


I am using timeline.js to add a timeline to my page. Unfortunately the width of an element with class .tl-slide-content is set somewhere I cannot see. As a result, the width is 940px or 448px depending on viewport width. This is causing issues with how the text next to the photo is being displayed.

I have tried selecting the element with every ascendant class available, including any IDs that I could find. Still there is no change and I am unable to figure this out.

What I want to know is this:

  1. what is 'element' in this context?
  2. are there tools in the developer console that enable me to find where width is being set to 940px?
  3. If anyone has any experience with this particular library and could point me in the direction of the appropriate selectors that would be fantastic

I have tried putting my stylesheet after the timeline, I even tried putting it right at the bottom of the body tag. Still no change.

enter image description here


Solution

  • The 'element' selector is displaying all the properties set by the inline styling within the HTML file itself. Inline styles supersede all other styling because of cascading (first to last). Last iteration is displayed.

    You can see the word inline to the right of the 'element' box.

    If you do not have write access to the HTML file you are working with then you may need to use !important after your width: 100%. This is really a last resort.