I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs).
Here is what I am aiming for:
https://i.sstatic.net/f6Tcq.png
My goal is to maintain the same design across xl-md-sm and even for xs. I tried using @media query to solve this problem but unfortunately, it did not work as expected. Therefore, I need your assistance.
This is the current outcome:
https://i.sstatic.net/av2CH.png
Below is the HTML markup:
<div class="container mt-5 mb-4 px-5">
<div class="card ">
<div class="row mt-5 w-100 hover-shadow ">
<div class="meq card-body bg-danger .d-sm-flex col-2 mt-0 mb-0 rounded-circle px-sm-0 ">
<h1 class="nowrap text-center text-light font-weight-bold px-sm-2 py-5">KKE</h1>
<a href="#!">
</a>
</div>
<div class="col-10 second_part">
<div class="card-text justify-content-center align-items-center">
<div class="card-body">
<a href="#" class="list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h3 class="mb-1 text-dark font-weight-bold">Kumbu<br> Kumbu<br>Ezechias</h3>
<small class="text-muted">
<ul class="list-group">
<li>
<div class="progress ">
<div class=" progress-bar bg-danger" role="progressbar" style="width: 100%;"
aria-valuenow="100" aria-valuemin="100" aria-valuemax="100"></div>
</div>
</li>
<li> Dear you won</li>
<li><small class="font-weight-bold align-content-center float-right">Mo 20224525</small>
</li>
</ul>
</small>
</div>
<p class="mb-1">
Xxxxx77
</p>
<p class="mb-1">
04:25
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/ card 1 -->
And here is the CSS code:
* {
margin: 0;
padding: 0;
initial-letter-align: center;
text-decoration: none;
box-sizing: border-box;
}
h1,
h3,
h6 {
text-transform: uppercase;
}
ul {
margin-left: -10px;
padding-left: -10px;
list-style: none;
}
h6 {
text-align: end;
margin-top: 70%;
margin-right: 37%;
}
.nowrap {
white-space: nowrap;
}
@media (max-width: 48em) {
h1,
h3 {
font-size: small;
font-weight: normal;
}
h1 {
margin-top: 0%;
text-align: center;
}
div .meq {
top: 50%;
text-align: center;
max-height: 10.1rem;
max-width: 10.1rem;
padding-left: 0.7rem;
padding-right: 1.9rem;
position: relative;
border-radius: 100%;
}
* {
margin: 0;
padding: 0;
initial-letter-align: center;
text-decoration: none;
box-sizing: border-box;
}
}