0

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

BitShift
  • 671
  • 5
  • 21

2 Answers2

2

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.

S Henry
  • 107
  • 5
  • I see... yeh I had an feeling that inline had some kind of super-cedence going on there. This is just a css and js library that basically reads from a json file and styles the output. Using !important has worked. Thank you very much. – BitShift Mar 08 '19 at 01:45
1

My suggestion is to look at their CSS source code:

https://github.com/NUKnightLab/TimelineJS/tree/master/source/less

Overwriting their CSS would just bloat your code.

Duplicate the library(if you intend to use it again) and then use the duplicate to internally mess with their source code to achieve the results you want.

I know I didn't give you a direct answer, but libraries typically have their own conventional styling, etc. without looking at the source you're just guessing...

Ernie
  • 186
  • 1
  • 10
  • yeh that's certainly a viable option, but I prefer overriding despite the bloat, at least then I know my customisations are centralized. I'm just using !important for any changes I make because just about all the styles are inlined. – BitShift Mar 08 '19 at 03:36