How to make stadium boxes proportional to each other by height? (HTML and CSS)
Question
There are two stadium boxes on the first row and three stadium boxes in the second row. Ideally the height of all boxes would be proportional to each other relative to their respective rows.
The first two boxes in the first row should be the same height and the three boxes in the second row should be the same height.
What is the best approach to making the height of the boxes equally proportional to each other based on which row it is on?
I've tried adding break statements between each "p" tags to adding a space within the text but that causes the stadium boxes to become uneven relative to each other when resizing the screen or viewing in tablet mode.
I've also tried using vh measurements in the height attribute within the .review-col and .review-col-2 class but that causes the text to sometimes exceed the boundaries of the stadium box when resizing the screen.
Here is a picture for context.
HTML
<html>
<div class="review-row">
<div class="review-col">
<div class="icon">
<img src="images/facials.PNG">
<div class="user-info">
<h4>Facials</h4>
</div>
</div>
<p>Custom Facials<br>
Custom Chemical Peel Facials<br>
Image O2 Lift Facial<br>
Galvanic Facial<br>
Circadia Oxygen RX Facial<br>
Dermaplaning Facial<br>
Microdermabrasion Facial<br>
Microneeding Facial<br>
Fox C Peel Facial<br>
Plamere Skin Tightening Facial<br>
Plasma Fusion Facial<br>
FCR Facial
</p>
</div>
<div class="review-col">
<div class="icon">
<img src="images/skin_solutions.PNG">
<div class="user-info">
<h4>Skin Care Solutions</h4>
</div>
</div>
<p>Skin Tags<br>
Cherry Angiomas<br>
Sebacious Hyperplasia<br>
Fibromas<br>
Seborrheic Keratosis<br>
Flat Hyperigmentation<br>
Acne Lesions<br>
Milias<br>
Closed Comedones<br>
Cappillaries
</p>
</div>
</div>
<div class="review-row-2">
<div class="review-col-2">
<div class="icon">
<img src="images/lash.PNG">
<div class="user-info">
<h4>Custom Lashes</h4>
</div>
</div>
<p>Full Set of Classic and Volume Lash Extension<br>
Lash Extension Fill<br>
Lash Extension Removal<br>
Lash Lift and Tint<br>
</p>
</div>
<div class="review-col-2">
<div class="icon">
<img src="images/microblading.PNG">
<div class="user-info">
<h4>Microblading</h4>
</div>
</div>
<p>Permanent Eyebrow Tattoo Techinque
</p>
</div>
<div class="review-col-2">
<div class="icon">
<img src="images/eyebrow_treatment.PNG">
<div class="user-info">
<h4>Eyebrow Treatment</h4>
</div>
</div>
<p>Eyebrow Waxing<br>
Eyebrow Tint
</p>
</div>
</div>
</section>
</html>
CSS
.review-row{
width: 90%; /*changes the width of the box*/
margin: auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.review-row-2{
width: 80%;
margin: auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.review-col{
flex-basis: 33%; /*36.3*/
padding: 20px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 30px;
box-shadow: 0 15px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
height: 40%; /*47vh*/
background-color: #c3f7ef;
}
.review-col-2{
flex-basis: 28.2%; /*23.2%*/
padding: 15px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 30px;
box-shadow: 0 15px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
height: 100%; /*30vh*/
background-color: #c3f7ef;
}
.review-col p{
font-size: 20px;
margin-left: 20px;
font-family: 'Open Sans', sans-serif;
}
.review-col-2 p{
font-size: 20px;
margin-left: 20px;
font-family: 'Open Sans', sans-serif;
}
.icon{
display: flex;
align-items: center;
margin: 20px 0;
text-align: center;
/*justify-content: center;*/ /*centers all title/header content*/
}
.icon img{
width: 70px;
margin-right: 20px;
border-radius: 30px; /* 3px for stadium effect*/
}
.user-info h4{
/*text-align: center;*/
font-family: 'Kaushan Script', cursive;
margin-bottom: 10px;
font-size: 20px;
}
.user-info small{
color:#009688;
}
.review-col:hover{
transform: translateY(-8px);
}
.review-col-2:hover{
transform: translateY(-8px);
}
.review-row read-more-button{
display: flex;
justify-content: center;
flex-direction: column;
}
@media screen and (max-width: 770px){
.review-row{
width: 100%;
justify-content: center;
}
.review-col{
flex-basis: 100%;
height: 100%;
}
.review-row-2{
width: 100%;
justify-content: center;
}
.review-col-2{
flex-basis: 100%;
height: 100%;
}
}
1 answers
solution1
1 ACCPTED 2020-11-15 05:46:49
You can wrap the rows inside a div say eq-height and give the rows a definition of flex: 1; . You need to remove height from the two row classes for it to take effect.
.review-row { width: 90%; /*changes the width of the box*/ margin: auto; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .eq-height { display: flex; } .review-col { flex: 1; } .review-row-2 { width: 80%; margin: auto; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .review-col { flex-basis: 33%; /*36.3*/ padding: 20px; margin-bottom: 10px; margin-right: 10px; border-radius: 30px; box-shadow: 0 15px 20px 3px #00968814; cursor: pointer; transition: transform .5s; background-color: #c3f7ef; } .review-col-2 { flex-basis: 28.2%; /*23.2%*/ padding: 15px; margin-bottom: 10px; margin-right: 10px; border-radius: 30px; box-shadow: 0 15px 20px 3px #00968814; cursor: pointer; transition: transform .5s; background-color: #c3f7ef; } .review-col p { font-size: 20px; margin-left: 20px; font-family: 'Open Sans', sans-serif; } .review-col-2 p { font-size: 20px; margin-left: 20px; font-family: 'Open Sans', sans-serif; } .icon { display: flex; align-items: center; margin: 20px 0; text-align: center; /*justify-content: center;*/ /*centers all title/header content*/ } .icon img { width: 70px; margin-right: 20px; border-radius: 30px; /* 3px for stadium effect*/ } .user-info h4 { /*text-align: center;*/ font-family: 'Kaushan Script', cursive; margin-bottom: 10px; font-size: 20px; } .user-info small { color: #009688; } .review-col:hover { transform: translateY(-8px); } .review-col-2:hover { transform: translateY(-8px); } .review-row read-more-button { display: flex; justify-content: center; flex-direction: column; } @media screen and (max-width: 770px) { .eq-height { flex-direction: column; flex-basis: 100%; } .review-row { width: 100%; justify-content: center; } .review-col { flex-basis: 100%; } .review-row-2 { width: 100%; justify-content: center; } .review-col-2 { flex-basis: 100%; } }
<div class="review-row"> <div class="eq-height"> <div class="review-col"> <div class="icon"> <img src="images/facials.PNG"> <div class="user-info"> <h4>Facials</h4> </div> </div> <p>Custom Facials<br> Custom Chemical Peel Facials<br> Image O2 Lift Facial<br> Galvanic Facial<br> Circadia Oxygen RX Facial<br> Dermaplaning Facial<br> Microdermabrasion Facial<br> Microneeding Facial<br> Fox C Peel Facial<br> Plamere Skin Tightening Facial <br> Plasma Fusion Facial<br> FCR Facial </p> </div> <div class="review-col"> <div class="icon"> <img src="images/skin_solutions.PNG"> <div class="user-info"> <h4>Skin Care Solutions</h4> </div> </div> <p>Skin Tags<br> Cherry Angiomas<br> Sebacious Hyperplasia<br> Fibromas <br> Seborrheic Keratosis<br> Flat Hyperigmentation<br> Acne Lesions<br> Milias <br> Closed Comedones<br> Cappillaries </p> </div> </div> </div> <div class="review-row-2"> <div class="eq-height"> <div class="review-col-2"> <div class="icon"> <img src="images/lash.PNG"> <div class="user-info"> <h4>Custom Lashes</h4> </div> </div> <p>Full Set of Classic and Volume Lash Extension<br> Lash Extension Fill<br> Lash Extension Removal<br> Lash Lift and Tint<br> </p> </div> <div class="review-col-2"> <div class="icon"> <img src="images/microblading.PNG"> <div class="user-info"> <h4>Microblading</h4> </div> </div> <p>Permanent Eyebrow Tattoo Techinque </p> </div> <div class="review-col-2"> <div class="icon"> <img src="images/eyebrow_treatment.PNG"> <div class="user-info"> <h4>Eyebrow Treatment</h4> </div> </div> <p>Eyebrow Waxing<br> Eyebrow Tint </p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make a proportional 4 column layout with html and css
Make width proportional to height in css
How to make HTML table height proportional to its width?
CSS: make div width proportional to height
How to make 2 cells independent from each other in height in CSS?
html make <td> height proportional to the width
How to make div boxes same height as each other, while aligning list items within
How to make these boxes in pure html and css?
How to make the height of content div proportional?
How do I align text boxes under each other in CSS/HTML
Related Tags