I’m trying to make a display that looks like a rounded avatar with text beside it. I’ve managed to make the rounded avatar but the problem is when I add text beside it, sometimes the avatar becomes oval instead of round. what am I doing wrong?
this is my code: jsfiddle
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.red-label {
color: red;
}
.fs-small {
font-size: 0.8em;
}
.fs-smaller {
font-size: 0.5rem;
}
.user-avatar {
background-repeat: no-repeat;
background-size: cover;
background-color: white;
background-position: center;
height: 48px;
width: 48px;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion-body row g-3">
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="xwalsh">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>xwalsh</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Indramayu, Jawa Barat, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="rigoberto00">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>rigoberto00</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kota Pekanbaru, Riau, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="stracke.christ">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>stracke.christ</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Kepulauan Selayar, Sulawesi Selatan, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="jarrett79">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>jarrett79</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Tambrauw, Papua Barat Daya, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="schamberger.dannie">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>schamberger.dannie</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Garut, Jawa Barat, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="prince44">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>prince44</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Bangli, Bali, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="xgraham">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>xgraham</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Tebo, Jambi, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="px-0 d-flex justify-start align-items-top" title="murray.talon">
<div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
<div class="ms-2">
<div class="fw-bold">
<span>murray.talon</span>
<span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
</div>
<div class="fs-small fw-bold text-success">
<span class="me-2"> Sightseeing[ SS ] </span>
</div>
<div class="fst-italic fs-small ellipsis-2">Kabupaten Hulu Sungai Tengah, Kalimantan Selatan, Indonesia</div>
<div class="fst-italic fs-small">[email protected]</div>
</div>
</div>
</div>
<div class="px-3 pe-4 m-3 text-end">
<a href="#">Lihat Semua</a>
</div>
</div>
2
Answers
This code will keep your avatar round and prevent it from becoming oval. It also centers the text beside the avatar using CSS Grid’s place-items property.
You can replace
width: 48px;
byflex: 0 0 48px;
which is the shorthand forWhich says that the element is not allowed to grow or shrink and has a main size of 48px.
Another option would be to use
By default, a flex element comes with
flex-shrink: 1
and here you want that element to not shrink so you need to specify it.Another option would be to use