I want to replicate the following design provided by our UI/IX designer.
I am having a hard time positioning the circular part of the image at the center. (The vertical line and the circular part are two different images)
I tried using the padding-top on the "even part of the divs" and after few hit and trials, I replicated the design on "my device".
<!-- Sorry for bad naming conventions. Also, Bootstrap V5.3.0-aplha1 is being Used-->
<style>
.cols:nth-of-type(even) {
padding-top: 17rem;
}
</style>
<body>
<div class="container text-center">
<div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
<div class="cols">
<div class="row row-cols-1 g-0">
<div class="col">
<div class="card">
<div class="card-body">
<h3>CDR Report Writing</h3>
</div>
</div>
</div>
<div class="col">
<img src="./img/line-service.svg" alt="" />
</div>
<div class="col">
<img src="./img/circle-service.svg" alt="" />
</div>
</div>
</div>
<div class="cols">
<div class="row row-cols-1 g-0">
<div class="col">
<img src="./img/circle-service.svg" alt="" />
</div>
<div class="col">
<img src="./img/line-service.svg" alt="" />
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3>CDR Report Writing</h3>
</div>
</div>
</div>
</div>
</div>
<div class="cols">
<div class="row row-cols-1 g-0">
<div class="col">
<div class="card">
<div class="card-body">
<h3>CDR Report Writing</h3>
</div>
</div>
</div>
<div class="col">
<img src="./img/line-service.svg" alt="" />
</div>
<div class="col">
<img src="./img/circle-service.svg" alt="" />
</div>
</div>
</div>
<div class="cols">
<div class="row row-cols-1 g-0">
<div class="col">
<img src="./img/circle-service.svg" alt="" />
</div>
<div class="col">
<img src="./img/line-service.svg" alt="" />
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3>CDR Report Writing</h3>
</div>
</div>
</div>
</div>
</div>
<div class="cols">
<div class="row row-cols-1 g-0">
<div class="col">
<div class="card">
<div class="card-body">
<h3>CDR Report Writing</h3>
</div>
</div>
</div>
<div class="col">
<img src="./img/line-service.svg" alt="" />
</div>
<div class="col">
<img src="./img/circle-service.svg" alt="" />
</div>
</div>
</div>
<div class="cols">
<div class="row row-cols-1 g-0">
<div class="col">
<img src="./img/circle-service.svg" alt="" />
</div>
<div class="col">
<img src="./img/line-service.svg" alt="" />
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3>CDR Report Writing</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
But the problem here is that, the value given on the padding-top works only on "my device". If I view the work on "other device" then the positioning will be all wrong.
Design on My Device:
Design on Other Device:
What other methods can I use to replicate the given design responsively on all large devices (Width more than 991px)?. You can skip worrying about devices for width less than 991px. I already have other plans for that.
2
Answers
You can try this way:
try this. this is much more optimized.. i removed unnecessary codes.