0

Хочу сделать более адаптивную часть сайта. Не знаю как правильно оформить. А точнее просто не знаю как сделать так, чтобы эти белые блоки не налазили на друг друга при уменьшении экрана сайта. Но не знаю как это сделать.

/*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>

введите сюда описание изображения

1
  • блоки можно засунуть в таблицу, тогда они не будут съезжать.
    – Roman C
    19 ноя 2017 в 1:41

2 ответа 2

4

Используйте медиа запросы:

.team{
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
     background: #312b51;
    background-size: cover;
    position: relative;
}

.t-team{
  display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.item-team{
  text-align: center;
  margin: 20px 0;
  border: 1px solid #7a778e;
}

.name-team{
  flex: 0 0 100%;
  text-align: center;
}

.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;
}


@media (min-width: 700px){
  .team{
      height: 100vh;
      min-height: 600px;
  }
  
  .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="img/White%20block.png" alt="">
        <h3>Semf ucuk</h3>
        <p>Ceo & Founder</p>
      </div>    
      <div class="item-team">
        <img src="img/White%20block.png" alt="">
        <h3>Dic Adalin</h3>
        <p>Engineering</p>
      </div>    
      <div class="item-team">
        <img src="img/White%20block.png" alt="">
        <h3>Jeng Kol</h3>
        <p>Designer</p>
      </div>    
      <div class="item-team">
        <img src="img/White%20block.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>

0
-1

Добрый день Попробуйте задать ширину блоков в vw 1vw = 1% ширины рабочей области браузера (а 1vh = 1% высоты)

можно пойти ещё дальше в css прописать изменение вёрстки при уменьшении экрана до определённого размера, например, 500px

@media screen and (max-width: 500px) 
{
   .block{
      width = 45vw;
      margin = 2.5vw;
   }
} 

В таком случае что бы не делать вертикальные блоки слишком узкими, делаем их в два ряда

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.