Our UI/IX designer has provided a design that I need to replicate.
https://i.sstatic.net/8nXym.png
I am facing difficulties in centering the circular part of the image. (The vertical line and circular part are separate images)
I experimented with using padding-top on the "even part of the divs" and after some trial and error, I managed to achieve the design on "my device".
<!-- Apologies for the poor naming conventions. Using Bootstrap V5.3.0-alpha1-->
<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>
<!-- more code here -->
</body>
The issue is that the padding-top value only seems to work correctly on "my device". Viewing it on "other devices" results in incorrect positioning.
Design on My Device:
https://i.sstatic.net/ABH21.png
Design on Other Device:
https://i.sstatic.net/eTUpG.png
What alternative methods can I use to ensure the design replicates responsively on all large devices (Width greater than 991px)? I'm not concerned about smaller widths as I have other plans for handling those.