I have a specific HTML setup that includes CSS styling for rows, circles, and lines:
.row.justify-content-center div:last-child>div>div {
display: none;
}
.line {
width: 100%;
height: 9px;
margin-left: 16px;
border-bottom: 2px solid lightgrey;
position: absolute;
}
.circle {
height: 16px;
width: 16px;
background-color: lightgrey;
border-radius: 50%;
display: inline-block;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333475d435d43">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="align-text-center">
<div class="row justify-content-center">
<div class="col-1 text-center">
<div id="step-1" class="circle">
<div class="line"></div>
</div>
<div class="d-none d-md-block">
<p class="small">Step 1</p>
</div>
</div>
<div class="col-1 text-center">
<div id="step-2" class="circle">
<div class="line"></div>
</div>
<div class="d-none d-md-block">
<p class="small">Step 2</p>
</div>
</div>
<div class="col-1 text-center">
<div id="step-3" class="circle">
<div class="line"></div>
</div>
<div class="d-none d-md-block">
<p class="small">Step 3</p>
</div>
</div>
</div>
</div>However, when I view this layout on smaller screens such as an iPhone 12, the line extends beyond its intended container. Here is an image showing the issue: https://i.sstatic.net/hmDZg.png
The width of the line is set to 100%, but it still overflows. How can I correct this problem?