Почему мои столбцы перекрываются по вертикали при изменении размера браузера? - PullRequest
Новая
       22

Почему мои столбцы перекрываются по вертикали при изменении размера браузера?

0 голосов
/ 01 июня 2018

Я занимаюсь бутстрап-адаптивной веб-разработкой, мне удалось сделать мою веб-страницу достаточно адаптивной, когда я меняю ширину, однако мои средние столбцы перекрываются, если я изменяю размер по вертикали.Вот код: 

<div class="container-fluid con">
        <div class="row">
          <div class="col-md-2 d-none d-md-block col1">
         </div>
          <div class="col-md-6 col2">  
            <p id="header-p">Full stack developer specialising in responsive website design and smooth user experience. Practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture</p>
            <hr id="hr1">
            <p id="header-tag">Web Developer - User Experience Designer - Graphic Artist
            </p>
          </div>
               <div class="col-md-2 pic-col">
            <img class="img-responsive rounded-circle img-thumbnail" src="#">
            </div>
          <div class="col-md-2 d-none d-md-block col1">
          </div>
        </div>
      </div>
    <div class="container-fluid con2">
      <div class="row">
        <div class="col-md-2 d-none d-md-block col1"></div>
        <div class="col-md-8 port-col"><h2 id="portfolio-header">Portfolio</h2>
          <hr id="hr2">
        </div>
        <div class="col-md-2 d-none d-md-block col1">     
        </div>
      </div>
    </div>

И CSS: 

#header-p{
  margin-top: 10%;
  text-align: center;
  color: white;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
}
  #header-tag{
  padding-top: 1rem;
  text-align: center;
  color: white;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
}
.con{
  margin: 4rem auto 2rem auto;
}
.col1, .col3{
  border: 1px solid #bfbfbf;
  background-color: #bfbfbf;
  height: 100vh;
}
.col2{
  background-color: #cccccc;
  height: 60vh;
}
.pic-col{
  background-color: #cccccc;
  height: 60vh;
}
#portfolio-header{
  text-align: center;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 60px;
  letter-spacing: 5px;
  /*line-height: 90px;*/
  max-width: 100%;
  color: #b3b3b3;
}
.port-col{
  max-height: 100vh;
}
.con2{
  margin: 2rem auto 2rem auto;!important
}

полный код здесь, если я что-то упустил https://codepen.io/Seaplush/pen/rKVLmX

...