Fake Company Project

Hello , can somebody help me out here with the advice where to look for the solution. I know something is not right with my flexbox, but can’t see the problem or where i have to correct. If i resize the screen my 3 images from the container get out and overflow other contents.
This is the CSS part:
.team {

height: 500px;

display: flex;

background-image: url("..//image//business2.jpg");

background-size: cover;

background-position: center;

background-repeat: no-repeat;

justify-content: center;

flex-wrap: wrap;

text-align: center;

align-content: center;   

}

#team-container h2 {

text-align: center;

font-size: 2rem;

font-family: "Lexend Mega" , sans-serif;

}

.teammate{

display: block;

flex-basis: 280px; 

flex-shrink: 1;

}

.teammate img {

width: 200px;

height: 250px;

align-items: center;

}

And this is the HTML:

    <h2>Our Team</h2>

    <div class="team">

        <div class="teammate">

            <img src=".\\resources\\image\\employee1.jpg">

            <h3>Lisa Fischer</h3>

            <p>C.E.O. - Founder and Principal Investor</p>

        </div>

        <div class="teammate">

            <img src=".\\resources\\image\\employee2.jpg">

            <h3>Alex Lasker</h3>

            <p>Partner - Research & Development</p>

        </div>

        <div class="teammate">

            <img src=".\\resources\\image\\employee3.jpg">

            <h3>Omar Carlsen</h3>

            <p>Partner - Partnerships & Marketing</p>

        </div>

    </div>

 </div>

Of course this is not all but the relevant part! Shed a little light on me please. Thank you

I found a solution ,just now :rofl:
I added in the .team selector a min-height instead of height and also put a top padding so it looks nicer.
But I am still curious what other solutions are there, and how messy is my code. Thank You!

1 Like