timeline items overlap

  • Resolved joah

    (@joah)


    3 years, 5 months ago

    I have a vertical timeline with items alternating left and right. It seems like whenever an item on the left is vertically longer than the next item on the right, and is then followed by a group, the group starts too high up. The next item will end up overlapping.

    I can better explain using a screenshot of the problem.

    This looks like a simple css fix, but i can’t figure it out. Could you help? Thanks in advance!

    • This topic was modified 3 years, 5 months ago by joah.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter joah

    (@joah)

    I roughly fixed it using this “extra css”, but i’m sure this will break somewhere down the line:

    .bold_timeline_group:after {
  content: "";
  display: table;
  clear: both;
}
.bold_timeline_item:nth-child(odd) {
	text-align: left !important;
    width: calc(50% - 2.5rem) !important;
    float: left !important;
	margin-top:0px !important;
}
.bold_timeline_item:nth-child(even) {
	text-align: left !important;
    width: calc(50% - 2.5rem) !important;
    float: right !important;
}

    P.S. The line text-align: left !important; can be left out, this was a personal styling choice.

    • This reply was modified 3 years, 5 months ago by joah.
Viewing 1 replies (of 1 total)
  • The topic ‘timeline items overlap’ is closed to new replies.