Vertical timeline list code help!

[BFM-Austin]

Hi,

I'm looking for some help in creating a vertical timeline in my client's site but pictures always bleed into the line space and I would also like the timeline bubble to appear at the top of each list entry by the date rather than appear afterwards.

The page in question: https://xmaxo465xvl87x9n-52761690263.shopifypreview.com

My code is currently:

// VERTICAL TIMELINE

.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #000000;

}

.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;

}

.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #FFF;

}

.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;

}

.timeline ul li:nth-child(odd) div {
left: 45px;

}

.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #F45B69 transparent transparent;

}

.timeline ul li:nth-child(even) div {
left: -439px;

}

.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #F45B69;
}
// VERTICAL TIMELINE

[khilan]

transform: translatex(-50%);

please delete this coad and add this coad

transform:translatey(-50%);

then solve this problem thank you

[BFM-Austin]

I've tried this and it makes the bubbles position off center from the timeline. This also doesn't help solve the issue with images covering the line.

[BFM-Austin]

Just realized I forgot to attach the store password.

pw: 888123