Boxes cant resize after the most biggest one - html

Question

I want to set all of these boxes width and height after the most biggest one.. display: flex destroy whole card.
Can someone tell me what change, what add or what to do, to let that code still working?
CSS
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
HTML
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>

Answer 1

You need to add a little bit of JS, in this snippet I used two forEach cycles for the profiles, the first is used to detect the maximum width and height of each profile, and the second is applying it to all profile elements. So all the profile elements have the maximum width and height.
let profiles = document.querySelectorAll(".profile"),
profileWidth = 0,
profileHeight = 0;
profiles.forEach(function(profile){
if(profile.offsetHeight > profileHeight){
profileHeight = profile.offsetHeight;
}
if(profile.offsetWidth > profileWidth){
profileWidth = profile.offsetWidth;
}
});
profiles.forEach(function(profile){
profile.style.height = profileHeight + "px";
profile.style.width = profileWidth + "px";
});
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>

Answer 2

I hope I understand correctly what your actual problem is. But I'll try anyway...
How about including all .profile elements in a container div and replace max-width with just width? Also .profile:hover will be best to scale to 1.05.
.profiles-container {
widht: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
cursor: pointer;
transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
<div class="profiles-container">
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
</div>
I think you are mistaken to consider finding the bigger one. You just have to decide on a size that fits what you want to do and going with it. You can then adjust the child elements of profile.

Answer 3

you can use flex attribute but is not related to your question
in my opinion you must use JavaScript or other scripts to do that
in JavaScript:
1-get All boxes
2-find the biggest
3-set Other boxes with and height
but its will be nice by using :
css:
body {
display: flex;
}
.profile {
flex: 1;
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
html:
<div className="profile">
<img src="default.jpg" alt="Profile photo" className="profile_image">
<div className="profile_name">Name</div>
<div className="profile_info">Men (12 years)</div>
<div className="profile_verifed"><i className="material-icons">check</i>Verifed</div>
</div>
<div className="profile">
<img src="default.jpg" alt="Profile photo" className="profile_image">
<div className="profile_name">Administrator Adminovsky</div>
<div className="profile_info">Men (12 years)</div>
<div className="profile_verifed"><i className="material-icons">check</i>Verifed</div>
</div>
or use JavaScript :
var boxes = $(".profile");
var maxWidth = 0;
boxes.each((index,data)=>{
if(maxWidth<$(data).width())
maxWidth = $(data).width()
});
boxes.each((index,data)=>{
console.log(maxWidth);
$(data).width(maxWidth);
});
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>