Хочу сделать более адаптивную часть сайта. Не знаю как правильно оформить. А точнее просто не знаю как сделать так, чтобы эти белые блоки не налазили на друг друга при уменьшении экрана сайта. Но не знаю как это сделать.
/*Team*/
.team{
color: #fff;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: center;
height: 100vh;
min-height: 600px;
background: #312b51;
background-size: cover;
position: relative;
}
.t-team{
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.item-team{
text-align: center;
margin: 20px 0;
margin-left: 30px;
border: 1px solid #7a778e;
margin-top: -250px;
}
.name-team{
flex: 0 0 100%;
text-align: center;
margin-bottom: 180px;
}
.button-team{
flex: 0 0 100%;
text-align: center;
}
.name-team h2{
font-family: 'Playfair Display';
text-transform: uppercase;
}
.name-team p{
font-family: 'Playfair Display';
font-size: 13pt;
font-weight: 100;
}
.name-team p:after {
content: "";
display: block;
width: 4em;
margin: 30px auto;
border-bottom: 2px solid #655c80;
}
.item-team h3{
font-size: 11pt;
text-transform: uppercase;
font-family: 'Roboto Black';
}
.item-team p{
margin-top: -5px;
font-size: 11pt;
font-family: 'Roboto Light';
text-transform: uppercase;
}
.button-team{
position: relative;
top: -30px;
}
.button-team p{
font-size: 13pt;
font-family: 'Roboto Light';
}
/*button*/
.team-button {
display: inline-block;
min-width: 150px;
margin-top: 10px;
padding: 14px;
color: #00e0d0;
border: 1px solid #00e0d0;
text-align: center;
outline: none;
text-decoration: none;
border-radius: 2px;
text-transform: uppercase;
font-size: 13pt;
font-family: 'Hammersmith One';
transition: 0.5s;
}
.team-button:hover,
.team-button:active {
background-color: #00c3b5;
color: #fff;
}
/*button*/
/*End Team*/
/*Works*/
.works{
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.block{
display: flex;
justify-content: space-between;
align-items: center;
width: 70%;
position: relative;
}
.project p{
font-size: 13pt;
font-family: 'Roboto Light';
padding-left: -20px;
color: #413d4b;
}
.our h1{
font-size: 20pt;
font-family: 'Playfair Display';
text-transform: uppercase;
color: #413d4b;
}
.project i{
font-size: 20pt;
font-weight: 100;
padding-left: 10px;
color: #413d4b;
}
.fa-angle-right{
position: relative;
top: 2.5px;
}
/*END Works*/
/*grey blocks*/
.grey{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.gb-top{
display: flex;
flex-direction: column;
flex-flow: row wrap;
justify-content: center;
}
.gb-b{
display: flex;
flex-direction: column;
flex-flow: row wrap;
justify-content: center;
}
/*end grey blocks*/
@media (min-width: 700px){
.team{
height: 100vh;
min-height: 600px;
background: #312b51;
}
.t-team {
flex-direction: row;
}
.item-team{
margin-top: -250px;
margin-left: 30px;
}
.name-team{
margin-bottom: 180px;
}
}
<div class="team">
<div class="name-team">
<h2>Meet our amazing team</h2>
<p>Lorem ipsum dolor sit amet proin gravida nibh vel velit</p>
</div>
<div class="t-team">
<div class="item-team">
<img src="https://cdn1.savepice.ru/uploads/2017/11/19/8142186e0c10021a74bef397e1b688ce-full.png" alt="">
<h3>Semf ucuk</h3>
<p>Ceo & Founder</p>
</div>
<div class="item-team">
<img src="https://cdn1.savepice.ru/uploads/2017/11/19/8142186e0c10021a74bef397e1b688ce-full.png" alt="">
<h3>Dic Adalin</h3>
<p>Engineering</p>
</div>
<div class="item-team">
<img src="https://cdn1.savepice.ru/uploads/2017/11/19/8142186e0c10021a74bef397e1b688ce-full.png" alt="">
<h3>Jeng Kol</h3>
<p>Designer</p>
</div>
<div class="item-team">
<img src="https://cdn1.savepice.ru/uploads/2017/11/19/8142186e0c10021a74bef397e1b688ce-full.png" alt="">
<h3>Pet Romak</h3>
<p>Marketind</p>
</div>
</div>
<div class="button-team">
<p>Become part our dream team, let`s join us!</p>
<a class="team-button" href="http://mnogoblog.ru/">We are hiring</a>
</div>
</div>