Right Date on Upper Timeline Not Completely Showing

Nothing I seem to do in the CSS seems to have any effect on it.

Jeff:

All the text on the timeline seems a bit larger than normal—almost like someone had used the browser’s “zoom in” feature a few times and hadn’t reset it for that domain. On a mac, that’s cmd-+ and sometimes pressing cmd-0 resets things correctly.

If the problem is just that your host page has an overall CSS rule that sets all of the type on the page larger, then you should be able to overcome that with a selector addressing “#storyjs-timeline” or if all you want is for the text in the nav buttons, then you can use “#storyjs-timeline .nav-container”

Thanks Joe. I have made some of my text larger (especially the timeline text below). But I don’t think I made I changed the date css nor did I do a base size for the whole timeline. Let me see what I can do with the info you have given me (all I want to do is to fix the date) and get back to you here. Thx for the reply.

Joe, I’m not sure what #storyjs-timeline .nav-container style was supposed to do but it didn’t do anything. Instead I changed the font size in this style from 13px to 11px. That seemed to work.

.vco-slider .nav-previous .date,.vco-slider .nav-next .date{font-size:11px;line-height:13px;font-weight:bold;text-transform:uppercase;margin-bottom:5px}

.date is a child of .nav-container, so my rule changes the date and the title, while yours only changes the date. If it works for you, it works for you!

#storyjs-timeline is the outermost CSS selector. The ones you use are fine, although do you also want to control the .nav-previous ?

When I applied a font-size to #storyjs-timeline .nav-container nothing happened (btw, I searched for this style in the css but didn’t find any. Perhaps it’s there but just not as you wrote it. (do you have a line number of where this style is in the css?)

The only date that was not showing in its entirety was the nav-next date (the caption under it is fine and I don’t expect it to show in it’s entirety). When I changed the font size in the style I told you it changed both the nav-prev and the nav-next date sizes.

sorry, i misread your code — didn’t see it had both next and previous. So things are working for you?

you can use style selectors that don’t otherwise appear in the CSS. There may not be anything with what I wrote. I verified those values using the inspector tool in my browser.

Here’s something I was thinking about last night. While I was able to make the “next” date show completely by reducing the font size, I’d like to increase the size to make it more readable. So, I’d like to be able to move the date and the caption to the left just a bit (I know the caption will be partially hidden, especially if it’s a long one and that’s okay). But I’d like the entire date to show. Now, I have seen on other timelines using this plugin (or jquery) that the dates occupy two lines, so, for example July 12 would appear on one line and directly underneath it the year would be displayed. That’s fine with me too.

For accessibility sake I would like to make the font size bigger. Right now, I believe the largest I can make it is 11px. The funny thing is that when I preview the timeline on the timelinejs site the whole next date does show up. The width of my timeline is still set to 100% but is not as wide as the preview, if that makes any difference. Mine does fit the box it occupies. Also, there is no problem with the next-previous date on the left. It does show up even when the font size is larger.