My cards, created in CSS and React.js, have a set height and width. However, when I change the flex direction from column to row, the cards automatically shrink in size. Why is this happening?
Card's CSS and JS code
CSS
.card{
height: 50%;
width: 30%;
min-width: 30%;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 20px;
}
.card:hover{
cursor: pointer;
}
img{
height: 80%;
width: 100%;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.schoolName{
font-weight: 700;
color: #100F0F;
margin-top: 10px;
margin-left: 4px;
}
.sub{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.schoolLocation{
color: #100F0F;
margin-left: 4px;
}
.reviews{
color: #100F0F;
margin-right: 4px;
}
@media only screen and (max-width: 600px){
.card{
height: 40%;
width: 80%;
}
.schoolName{
font-size: 20px;
}
}
JS
<div className={PopularCardCSS.card}>
<img src={props.schoolImage} alt="school" />
<div className={PopularCardCSS.cardContent}>
<h2 className={PopularCardCSS.schoolName}>{props.schoolName}</h2>
<div className={PopularCardCSS.sub}>
<p className={PopularCardCSS.schoolLocation}>
{props.schoolLocation}
</p>
<p className={PopularCardCSS.reviews}>
<span className={PopularCardCSS.rating}>{props.reviews} reviews</span>
</p>
</div>
</div>
</div>
The component that calls the card
CSS
.parent{
display: flex;
align-items: center;
/* justify-content: center; */
background-image: url(../assets/background2.jpeg);
background-size: cover;
}
.glass{
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
width: 100%;
height: 100vh;
/* display: flex;
flex-direction: row; */
}
.cardContainer{
display: flex;
flex-direction: row;
}
JS
<div className={PopularCSS.card}>
<div className={PopularCSS.parent}>
<div className={PopularCSS.glass}>
<h1 className={PopularCSS.title}>Popular Schools</h1>
<div className={PopularCSS.cardContainer}>
<div className= {PopularCSS.school}>
<PopularCard
schoolImage = {schoolimage}
schoolName="Ron Arad"
schoolLocation="Rehovot"
reviews="4"
/>
</div>
<div className= {PopularCSS.school}>
<PopularCard
schoolImage = {schoolimage}
schoolName="Ron Arad"
schoolLocation="Rehovot"
reviews="4"
/>
</div>
I attempted adding a flex wrap or setting min-height/min-width but there was no change.