Issue
I wast try to set 1px separator with vertically center using transform: translate(-50%, -50%); and top: 50%; but working fine for vertically center but my separator height increase with 1px more so my separator total height display 2px so any solution for that issues. this structure is fixed so please help me.
Thanks in adavance.
.number {
font-size: 50px;
line-height: 56px;
font-weight: bold;
}
.title {
font-size: 24px;
line-height: 30px;
font-weight: 500;
}
.separator-line {
position: absolute;
top: 50%;
left: calc(100% + 15px);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60%;
background-color: #000;
height: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row my-5">
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<span class="separator-line"></span>
<div class="number">01</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<span class="separator-line"></span>
<div class="number">02</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<span class="separator-line"></span>
<div class="number">03</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<div class="number">04</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
</div>
</div>
</section>
Solution
Change CSS use This transform: translateX(-50%);
for .separator-line
.number {
font-size: 50px;
line-height: 56px;
font-weight: bold;
}
.title {
font-size: 24px;
line-height: 30px;
font-weight: 500;
}
.separator-line {
position: absolute;
top: 50%;
left: calc(100% + 15px);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 60%;
background-color: #000;
height: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row my-5">
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<span class="separator-line"></span>
<div class="number">01</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<span class="separator-line"></span>
<div class="number">02</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<span class="separator-line"></span>
<div class="number">03</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
<div class="col-3 text-center px-3">
<div class="position-relative mb-4">
<div class="number">04</div>
</div>
<span class="d-block title mb-3">Completed Project</span>
<p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
</div>
</div>
</div>
</section>
Answered By - Prakash Software Answer Checked By - David Marino (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.