CSS: Отзывчивый UL / LI

Question

Я видел этот вопрос на SO, но я не могу заставить его работать.Я пытаюсь взять горизонтальный ul и изменить его на вертикальный, когда размер экрана меньше 768 пикселей.

Вот мой код CSS:

/* HeaderWrap */

#headerwrap {
  background: url(../img/topgraph.png) no-repeat center top; 
  position: relative;
  background-color: #3e86c3;
  background-size: cover;
  margin-top: -20px;
  padding-top: 200px;
  height:100vh;
  background-attachment: scroll;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  min-height: 650px;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#headerwrap h1 {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 15px;
  color: white;
  font-size: 45px;
  font-weight: 300;
  letter-spacing: 1px;
}

#headerwrap h2 {
  text-align: center;
  margin: 60px 200px 15px 200px;
  color: white;
  font-size: 35px;
  font-weight: 300;
  letter-spacing: 1px;

}

#headerwrap .header-links { 
  position: absolute; 
    bottom: 0; 
    text-align: center;
    width: 100%; 
    height: 160px; 
    color: #fff;
    padding-bottom: 20px;
}

#headerwrap ul { 
  text-align: center;
  text-decoration: none;
  list-style-type: none; 
  margin: 0;
  overflow: hidden; 

}

#headerwrap li { 
  float: left;
  padding-left: 18%;
  font-size: 24px;
}



#headerwrap img { 
  width: 100px;
  height: 100px;
}

@media (max-width: 768px) {
  #headerwrap {
    padding-top: 100px;
  }

  #headerwrap h1 {
    margin-top: 60px;
    font-size: 36px;
  }

  #headerwrap h2 {
    margin: 30px 50px 15px 50px;
    font-size: 20px;
  }

  #headerwrap .header-links { 
  position: absolute; 
    bottom: 0; 
    text-align: center;
    width: 100%; 
    height: 340px; 
    color: #fff;
    padding-bottom: 20px;
}

    #headerwrap li { 
      font-size: 18px;
      display: block !important;;
      padding: 0;
  }	

  #headerwrap img { 
  width: 60px;
  height: 60px;
}

<div id="headerwrap">
  <div class="row">
      <h1>Headline</h1>
      <h2>Marketing blurb </h2>

    <div class="col-lg-6">
    </div>
    <div>
        <!--<img src="img/topgraph.png" class="bg">-->
    </div>
  </div>

  <div class="header-links">
      <ul>
          <li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
          <li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
          <li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
      </ul>
  </div>
</div>
<!-- /headerwrap -->

Независимо от того, что я делаю в запросе @media, элементы li остаются горизонтальными.Любая помощь будет оценена.

Answer 1

Очень простой пример использования flexbox.

https://codepen.io/anon/pen/QZEXVg

Ключ - это медиа-запрос, применяющий ограничение.

@media (min-width: 768px) {
  .navbar__list {
    display: flex;
    justify-content: flex-start;
  }
}

Answer 2

Удалите float: left; для "обычных" li элементов и добавьте display: inline-block вместо этого.В противном случае они также будут перемещаться (отображаться рядом друг с другом) на меньших экранах.

Или добавить float: none в медиазапрос.

Answer 3

На вашем @media вы должны установить свойство width ваших ul и li равным 100%

@media (max-width: 768px) {
...
#headerwrap ul { 
    float: left;
    width: 100%;
}

#headerwrap li { 
    width: 100%;
}
...
}

Answer 4

Добавьте width: 100% к <li> в запросе @media.

Демонстрация:

/* HeaderWrap */

#headerwrap {
  background: url(../img/topgraph.png) no-repeat center top; 
  position: relative;
  background-color: #3e86c3;
  background-size: cover;
  margin-top: -20px;
  padding-top: 200px;
  height:100vh;
  background-attachment: scroll;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  min-height: 650px;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#headerwrap h1 {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 15px;
  color: white;
  font-size: 45px;
  font-weight: 300;
  letter-spacing: 1px;
}

#headerwrap h2 {
  text-align: center;
  margin: 60px 200px 15px 200px;
  color: white;
  font-size: 35px;
  font-weight: 300;
  letter-spacing: 1px;

}

#headerwrap .header-links { 
  position: absolute; 
    bottom: 0; 
    text-align: center;
    width: 100%; 
    height: 160px; 
    color: #fff;
    padding-bottom: 20px;
}

#headerwrap ul { 
  text-align: center;
  text-decoration: none;
  list-style-type: none; 
  margin: 0;
  overflow: hidden; 

}

#headerwrap li { 
  float: left;
  padding-left: 18%;
  font-size: 24px;
}



#headerwrap img { 
  width: 100px;
  height: 100px;
}

@media (max-width: 768px) {
  #headerwrap {
    padding-top: 100px;
  }

  #headerwrap h1 {
    margin-top: 60px;
    font-size: 36px;
  }

  #headerwrap h2 {
    margin: 30px 50px 15px 50px;
    font-size: 20px;
  }

  #headerwrap .header-links { 
  position: absolute; 
    bottom: 0; 
    text-align: center;
    width: 100%; 
    height: 340px; 
    color: #fff;
    padding-bottom: 20px;
}

    #headerwrap li { 
      font-size: 18px;
      display: block !important;
      padding: 0;
      width: 100%
  }	

  #headerwrap img { 
  width: 60px;
  height: 60px;
}

<div id="headerwrap">
  <div class="row">
      <h1>Headline</h1>
      <h2>Marketing blurb </h2>

    <div class="col-lg-6">
    </div>
    <div>
        <!--<img src="img/topgraph.png" class="bg">-->
    </div>
  </div>

  <div class="header-links">
      <ul>
          <li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
          <li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
          <li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
      </ul>
  </div>
</div>
<!-- /headerwrap -->