How fix flexbox cards and be responsive?

HTML-CSS
1

Hey guys, I’m trying to make project cards for my portfolio and my images aren’t lining up and filling the space of their container . All of the images are 1080x1080. My content also isn’t lining up because the images are the same size but my title are different lengths. How can I fix this?

<section id="project-section" class="project-section">
    <h2 class="projects-title">Projects</h2>
    <div class="projects-container">

      <div class="project">
        <img src="/images/misha-pic.png" alt="sample">
        <h3 class="project-title">Misha Picks</h3>
        <div class="links-container">
          <a class="demo-btn" href="https://mishapicks.netlify.app">Demo</a>
          <div class="gh-icon"><i class="fab fa-github"></i></div>
        </div>
      </div>

      <div class="project">
        <img class="small-image" src="/images/frogger-pic.png" alt="sample">
        <div class="project-content">
          <h3 class="project-title">Frogger</h3>
          <div class="links-container">
            <a class="demo-btn" href="https://frogger-plf.netlify.app">Demo</a>
            <div class="gh-icon"><i class="fab fa-github"></i></div>
          </div>
        </div>
      </div>

      <div class="project">
        <img src="/images/recipe-pic.png" alt="sample">
        <h3 class="project-title">Rezept</h3>
        <div class="links-container">
          <a class="demo-btn" href="https://e28p3.lefthandedcat.me/">Demo</a>
          <div class="gh-icon"><a href="https://github.com/pllealfunes/e28/tree/master/p3" class="projects"
              id="recipes"><i class="fab fa-github"></i></a></div>
        </div>
      </div>

      <div class="project">
        <img src="/images/animal-game-pic.png" alt="sample">
        <h3 class="project-title">Mystery Animal</h3>
        <div class="links-container">
          <a class="demo-btn" href="https://e2p3.lefthandedcat.me/">Demo</a>
          <div class="gh-icon"><a href="https://github.com/pllealfunes/e2/tree/master/p3" class="projects"
              id="guessing-game"><i class="fab fa-github"></i></a></div>
        </div>
      </div>

    </div>

  </section>


body{
  background: linear-gradient(10deg, #336699 , #ffffff );
  color:#336699;
  font-family: 'Mulish', sans-serif;
  text-align: center;
}

#bio{
    display: flex;
    justify-content: center;
    align-items: center;
}
.bio-title{
    font-size: 70px;
    text-align: center;
}

.contact-title,.projects-title{
    color:#ffffff;
}

.contact-para{
    color:#ffffff;
    font-size:25px;
    margin-top: -10px;
}

header{
    display: flex;
    justify-content: flex-end;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    opacity: .7;
    color:white;
}

ul{
    display: flex;
}

li{
    list-style: none;
    margin-right: 15px;
    font-size: 25px;
}

a{
    text-decoration: none;
    color: white;
}



  section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height:100vh;
}


h2{
    font-size: 60px;
    text-align: center;
}


p{
    text-align: center;
    font-size: 25px;
}

.projects-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1%;
    background-color: #336699;
    font-size:35px;
    color: white;
    flex: 0 0 50%;
    border-radius: 15px;
}

img{
 max-height: 100%;
 max-width: 100%;
 border-radius: 15px 15px 0 0;
}


.links-container{
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-top: -40px;
}

.links-container > div{
    margin-left: 10px;
}

.demo-btn{
    background-color: white;
    color: #336699;
    font-size: 25px;
    padding: 2px;
}

.project-title{
   margin-top: 5px;
}


form{
    width:500px;
    height:500px;
    text-align: center;
}

#name{
    margin-top: 5%;
    margin-bottom: 10%;
}


input[type=text],input[type=email]{
    margin: 0 auto;
    width:250px;
    font-size:20px;
    border: 1px solid #336699;
    height:40px;
    border-style: groove;
}

textarea{
    width:300px;
    height: 200px;
    margin-top: 20px;
    font-size:20px;
    resize: none;
    border: 1px solid #336699;
    border-style: groove;
}

button{
    padding: 10px;
    width: 200px;
    border:none;
    background-color:#ffffff;
    color:#336699;
    font-size: 20px;
    border-radius: 15px;
}

.gh-icon{
    font-size: 45px;
}



@media only screen and (min-width: 768px) {
    .project{
        flex: 0 0 20%;
    }
       
    input[type=text],input[type=email]{
        width:400px;
        height:40px;
    }
    
    textarea{
        width:400px;
        height: 200px;
    }
}
2

Not sure if this will help, but, if it’s a replaced element, have you tried object-fit and object-position?

Also, I read somewhere that, in principle, if you want the content to dictate the dimensions of its container, use flexbox, but if you want the container to dictate the the dimensions of its content, use CSS grid; but of course if you can make either work to your advantage then either is fine.

3

Thanks. I tried it but it didn’t make the images and titles line up. So I added some more media queries and adjusted the width of the container. I also made my titles a longer. Not sure if this is the best way since at screen min-width: 1169px my projects look too big. I’ll keep playing with it.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.