meganalissa

I've updated the code to adjust the height of the timeline line - @andreashirey1914 ~ not sure if you still need this or not, but I thought I'd include it here just in case or to help anyone else out in future. You'll just need to adjust the height in both desktop and mobile to suit your needs. You can see the added code, highlighted in green below. I do prefer the flexibility of 7.1, but I have a client whose site is built on 7.0, so this is a decent work around until they're ready for a site overhaul. // VERTICAL TIMELINE // /* The actual timeline (the vertical ruler) */ .timeline { box-sizing: border-box; position: relative; max-width: 1200px; margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline::after { content: ''; position: absolute; width: 6px; height: 1250px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px; } /* Container around content */ .timeline-container { box-sizing: border-box; padding: 10px 50px; position: relative; background-color: inherit; width: 50%; } /* The circles on the timeline */ .timeline-container::after { content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: #f9a733; border: 4px solid #f9a733; top: 15px; border-radius: 50%; z-index: 1; } /* Place the container to the left */ .timeline-left { left: 0; } /* Place the container to the right */ .timeline-right { left: 50%; } /* Add arrows to the left container (pointing right) */ .timeline-left::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white; } /* Add arrows to the right container (pointing left) */ .timeline-right::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Fix the circle for containers on the right side */ .timeline-right::after { left: -16px; } /* The actual content */ .timeline-content { padding: 20px 30px; background-color: white; position: relative; border-radius: 6px; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { /* Place the timeline to the left */ .timeline::after { left: 31px; height: 1575px } /* Full-width containers */ .timeline-container { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .timeline-container::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Make sure all circles are at the same spot */ .timeline-left::after { left: 15px; } .timeline-right::after { left: 15px; } /* Make all right containers behave like the left ones */ .timeline-right { left: 0px; } } /* Style copy */ .timeline-date { color: #a64050 ;font-size: 16pt; font-weight: 900; } .timeline-copy { color: #272a4f !important; } // VERTICAL TIMELINE END //