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

81
10

Я видел, как это спрашивали, но я не могу заставить его работать. Я пытаюсь взять горизонтальную 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 остаются горизонтальными. Любая помощь будет оценена по достоинству.

спросил(а) 2018-10-05T19:10:00+03:00 1 год, 11 месяцев назад
1
Решение
57

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

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

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

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

ответил(а) 2018-10-05T19:22:00+03:00 1 год, 11 месяцев назад
57

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


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

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

ответил(а) 2018-10-05T19:21:00+03:00 1 год, 11 месяцев назад
41

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

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

ответил(а) 2018-10-05T19:21:00+03:00 1 год, 11 месяцев назад
41

Добавить 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 -->

ответил(а) 2018-10-05T19:16:00+03:00 1 год, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема