How to size css cards in the right way-CodePudding

so this is my 1st project. and i could appreciate help with this. I tried everything but i dont know what i am doing wrong, i will be so thankful if someone know the sollution. Can you please help me with this i want the cards to stay the same size, all of em the same as the ones with two lignes paragraph how can i do that?see how it looks

.card-project{
    background-color: white;
    border: 1px solid white;
    min-height: 14em;
    width: 23em;
    overflow: hidden;
    border-radius: 10px;
    margin: 20px;
    transition: 0.7s ease;
}

.card-project:hover{
    transform: scale(1.1);
}

.img-project img{
    width: 100%;
}

.card-project:hover .img-project{
    opacity: 0.9;
}

.info-project{
    padding: 1em;
    
}

.category{
    font-size: 1em;
    color: black;
}



.title-project{
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    margin-top: 10px;
    
}
.content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

<section  id="projects">
            <h2 >Projects</h2>
            <div >
                <div >
                    <div >
                        <img src="icons/projetcs/ytb1.png">
                    </div>
                    <div >
                        <p >Some Thresh Play</p>
                        <strong >
                            <span>0SiFo0</span>
                            <a  href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
                                More details
                            </a>
                        </strong>
                    </div>
                </div>

CodePudding user response：

Running your code I couldn't see the cards plus the whole html was messy so I just recoded your question. Feel free to comment with questions.

.mainCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.projectCon {
  position: absolute;
  top: 0%;
  width: 70%;
  height: 100%;
  background-color: blue;
}

.level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 20%;
}

.level1 p {
  font-size: 4vw;
  font-weight: 600;
}

.level2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20%;
  left: 0%;
  width: 100%;
  height: 80%;
}

.level2Item1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 50%;
}

.level2Item2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 50%;
}

.projectDisplay {
  width: 16%;
  height: 80%;
  border-radius: 8px;
  background-color: #ffffff;
}

<div >
  <div >
    <div >
      <p>Projects</p>
    </div>
    <div >
      <div >
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
      </div>
      <div >
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Hello there is a lot of issues with your code but,I tried to reach what you are looking for. I can make you a professional layout if you need it, since this one is not that clean and not well organized.

Also one other advice, please take a look at css reset and start styling your website from scratch to understand the tricks.

body {
  background-color: black;
}

.card-project{
    background-color: white;
    border: 1px solid white;
    overflow: hidden;
    border-radius: 10px;
    transition: 0.7s ease;
    display: grid;
    grid-template-rows: auto 1fr;
}

.card-project:hover{
    transform: scale(1.1);
}

.img-project {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.img-project img{
  display: block;
  vertical-align: bottom;
  aspect-ratio: 1 / .5;
  max-width: 100%;
  object-fit: cover;
}

.card-project:hover .img-project{
    opacity: 0.9;
}

.info-project{
    padding: .25em .5em;
    display: grid;
}

.category{
    font-size: 1em;
    color: black;
    margin-block: 0 .25em;
}

.title-project{
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    margin-top: auto;
}
.content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
}

<section  id="projects">
  <h2 >Projects</h2>
  <div >
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg">
        </div>
        <div >
            <p >Some Thresh Play long looooong loooong veeeeery long title</p>
            <strong >
                <span>0SiFo0</span>
                <a  href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
                    More details
                </a>
            </strong>
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg">
        </div>
        <div >
            <p >Some Thresh Play</p>
            <strong >
                <span>0SiFo0</span>
                <a  href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
                    More details
                </a>
            </strong>
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg">
        </div>
        <div >
            <p >Some Thresh Play</p>
            <strong >
                <span>0SiFo0</span>
                <a  href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
                    More details
                </a>
            </strong>
        </div>
    </div>
  </div> 
 </section>

CodePudding user response：

Heres some running example you can play with. you can view it in full screen so you have an idea. Let me know.

h1 {text-align:center;}

body {
  background-color:beige;
  width:100%;
  height:auto;
  }

.featured {
  width:300px;
  height:250px;
  box-shadow:0px 4px 12px 0px;
  border-radius:20px;
  margin:20px;
  background-color:white;
}

.featured-container {
  display:grid;
  grid-template-columns:auto auto auto ;
  grid-gap:20px;
  justify-content:center;

}

.featured > img {
  object-fit:cover;
  width:300px;
  height:150px;
  border-radius:20px 20px 0px 0px;
}


.featured-info  {
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-evenly;
}

.featured-info > p {line-height:100%;}

.category{
    font-size: 1em;
    color: black;
}



.title-project{
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    margin-top: 10px;
    
}
.content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

<div >

<h1> Projects </h1>

<div >
   <div >
    <img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
    

 <div >
 <span>text</span>
 <span>text</span>
 <span>text</span>
 <span>text</span>
 
   </div>
  </div>
  
  
  <div >
    <img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
    

  <div >
 <span>text</span>
 <span>text</span>
 <span>text</span>
 <span>text</span>
 
   </div>
  </div>
  
  
  <div >
    <img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
    

  <div >
 <span>text</span>
 <span>text</span>
 <span>text</span>
 <span>text</span>
   </div>
  </div>
  
  
  
  <div >
    <img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
    

  <div >
 <span>text</span>
 <span>text</span>
 <span>text</span>
 <span>text</span>
 
   </div>
  </div>
  
  <div >
    <img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
    

  <div >
 <span>text</span>
 <span>text</span>
 <span>text</span>
 <span>text</span>
   </div>
  </div>
  
  <div >
    <img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
    

  <div >
 <span>text</span>
 <span>text</span>
 <span>text</span>
 <span>text</span>
 
   </div>
  </div>
  

 </div>