Hiding line overflow on "timeline" line.
Hi everyone! Trying to hide the extra line that's coming expanding beyond the first and last bullet points. I was thinking overflow-y might do the trick but no luck. I thought about giving an element a background color and trying overlay it, but that seems hacky.
Has anyone dealt with this?
Forgive me for the code pen, I don't have pro so the images aren't rendering, and using var for the color but that's the main structure of the css.
https://codepen.io/ezekielswanson/pen/qBLrXYJ
3 Replies
i remember helping you with this project before haha, the extra line height above the content is most likely caused due to padding or margin above and below the text and because the line is most likely taking up 100% of the container the height of the margin and padding is included within the 100%.
overflow-y won't work since the line is still within the container even though it seems like it's overflowing.
i created a quick version of what's is in the image so you can take a look, hopefully to help you get a better idea of what to do and for some inspiration of structure etc. I included three as i wasn't entirely sure which design it was you were going for. Each inherits the styles of the previous with the values that need to change being altered in the different examples, that way it's easier to see what's changing. For mobile view, realistically you'd probably want to remove the line and dots as the content becomes too cramped, that way you can avoid all the math in the last two examples too haha, I haven't in this example though. i hope this helps! https://codepen.io/deerCabin/pen/zYyErmB.I apologize for the late reply I was just able to hope back on. I very much appreciate you taking the time out to help me out with this! Have been stuck on it for a while so it was super helpful.
no worries man, yeah of course, don't sweat it, glad it helped!