I created a timeline but unfortunately, I am facing some challenges that I cannot seem to resolve :(
Firstly, the timeline is not adapting to different screen sizes, causing the lines to separate when the screen is enlarged or when longer descriptions are used. I would like it to always stay together. Does anyone have a solution for this issue?
Secondly, the timeline currently starts at value 1 but I need it to always start at value 4. How can I change this?
As shown in the image, both problems are visible - the separate timeline lines and starting at 1 instead of 4.
HTML
<ul class="timeline" id="timeline" *ngFor="let priority of Priorities; let p = index;">
<li class="li complete">
<div class="timestamp">
<span class="priorityNumber">{{priority.id}}</span>
</div>
<div class="status">
<span class="circle"></span>
<h4 class="timelineh4">{{priority.text}}</h4>
</div>
</li>
</ul>