Issue
I am attempting to draw a vertical line between the two brief case icons, ideally that isn't fixed in position so it adjusts with screen size. I have attached a copy of the container as well as a screen shot of what it currently looks like when run. Thanks!
<div class="container2">
<p style="font-size:64px; color: #555555;text-align:center; font-family: Courier New" >Work Expierence and Education<p>
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="p-2"><p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern<p>
<p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2018<p></div>
</div>
<div class="col-md-auto">
<br>
<span class="fa-stack" style="vertical-align: middle;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
<div class="col-6">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy<p>
<p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test <p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="p-2"><p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern 2<p>
<p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2019<p></div>
</div>
<div class="col-md-auto">
<br>
<span class="fa-stack" style="vertical-align: middle;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
<div class="col-6">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy<p>
<p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test <p>
</div>
</div>
</div>
Solution
You can draw vertical lines going from the bottom and top of each of the circles using after and before pseudo elements.
If these are made long but the containing element given overflow of hidden they join up but don't spill over.
In addition, the first instance has the before pseudo element displayed none and the last pseudo element has the after pseudo element displayed none.
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<style>
.col-md-auto:nth-child(2) {
overflow: hidden;
}
.col-md-auto:nth-child(2) span.fa-stack {
position: relative;
}
.col-md-auto:nth-child(2) span.fa-stack::before,
.col-md-auto:nth-child(2) span.fa-stack::after {
content: '';
background: black;
position: absolute;
left: 50%;
height: 100vh;
width: 1px;
display: inline-block;
z-index: 1;
}
.col-md-auto:nth-child(2) span.fa-stack::before {
bottom: 100%;
}
.col-md-auto:nth-child(2) span.fa-stack::after {
top: 100%;
}
div.row.justify-content-center:nth-child(3) .col-md-auto:nth-child(2) span.fa-stack::before,
div.row.justify-content-center:last-child .col-md-auto:nth-child(2) span.fa-stack::after {
display: none;
}
</style>
</head>
<body>
<div class="container2">
<p style="font-size:64px; color: #555555;text-align:center; font-family: Courier New">Work Expierence and Education
<p>
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="p-2">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern
<p>
<p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2018
<p>
</div>
</div>
<div class="col-md-auto">
<br>
<span class="fa-stack" style="vertical-align: middle;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
<div class="col-6">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy
<p>
<p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test
<p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="p-2">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern 2
<p>
<p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2019
<p>
</div>
</div>
<div class="col-md-auto">
<br>
<span class="fa-stack" style="vertical-align: middle;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
<div class="col-6">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy
<p>
<p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test
<p>
</div>
</div>
</div>There are what seemed like spurious p and br elements in the given HTML.
You may like to look further at these and see if they are necessary - they don't seem to add to the meaning given in the structure of the HTML. The main problem being to select what 'logically' seemed like the first child being the first row - but it wasn't because of p and br elements.
Answered By - A Haworth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.