How do I make a pseudo element fit the entire width of div? It is cutting off at the scroll
Question
Can someone help me figure out how to make my pseudo element span the entire width of my div element, instead of cutting off at the scroll please?
I've tried a few different things found online including changing display type, width etc. Please keep in mind this needs to be displayed horizontally. If you have any other suggestions how to make this work or any improvements in general that would be great.
thanks
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vardana'; }.container { background: linear-gradient(to right, rgba(20,30,48,.9), rgba(36,59,85,.9)); margin: 20px; height: 400px; border-radius: 10px; overflow: scroll; font-size: 13px; }.container ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; position: relative; }.container ul:before { content: ""; position: absolute; width: 100%; height: 4px; background: white; margin-top: 20px; }.Event1:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event2:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event3:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event4:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event5:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; }.Event6:before { content: ""; margin-top: -28px; position: absolute; width: 18px; height: 18px; border-radius: 10px; background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2)); border: 1.5px solid white; } li { list-style: none; }.Event1 h4 { color: #feb645; font-size: 14px; }.Event2 h4 { color: #feb645; font-size: 14px; }.Event3 h4 { color: #feb645; font-size: 14px; }.Event4 h4 { color: #feb645; font-size: 14px; }.Event5 h4 { color: #feb645; font-size: 14px; }.Event6 h4 { color: #feb645; font-size: 14px; }.Event1 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event2 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event3 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event4 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event5 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }.Event6 { margin: 10px; margin-top: 30px; padding: 10px; border-radius: 10px; color: white; width: 200px; }
<.DOCTYPE HTML> <html lang=“en”> <head> <title>Dads Website</title> <link rel="stylesheet" href="stylesheet.css"> <script src="JavaScript,js" defer> </script> </head> <body> <header> <nav class="navbar"> <h1>History Timeline</h1> </header> <div class="container"> <ul id="timelineList"> <li class="Event1"><h4>Event 1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event2"><h4>Event 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event3"><h4>Event 3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event4"><h4>Event 4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event5"><h4>Event 5</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </li> <li class="Event6"><h4>Event 6</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> </ul> </div> </body> <footer class="footer"> </footer> </html>
1 answers
solution1
0 ACCPTED 2020-04-18 08:02:45
I've changed from grid to inline-block to make this still display horizontally. But I think the below worked for me... Width: max-content;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?
How to make the background image of the pseudo element stretch to fit the width?
How do I make this div span the entire width?
How do I make a div that is the width of the entire screen?
How do I make the row element take up the entire width?
How to make a <video> element fit the entire height and width of the available screen
How to make a div to fit all available width hidden with scroll?
How to make horizontal line span entire width of overflow: scroll element?
Make element fit page scroll width with CSS
How to make SVG fit in pseudo element
Related Tags