Когда экран меньше, фон для моих flex-боксов не следует за ними, когда они go вертикальный ряд - PullRequest
Новая
       4

Когда экран меньше, фон для моих flex-боксов не следует за ними, когда они go вертикальный ряд

0 голосов
/ 02 мая 2020

Ладно, моя проблема в том, видите ли вы, когда оно развернуто, как оно имеет фон за флексбоксами? Теперь, если вы минимизируете экран, так как он отзывчивый, он поместит его в 2 строки, но фон для флексбоксов находится только в 1-м ряду, а не во 2-м / 3-м и так, он не за каждым блоком, и это мой вопрос, был бы признателен, если бы кто-то мог исправить и объяснить, FIDDLE: https://jsfiddle.net/vu4eaw2t/ КОД (ПРОВЕРЬТЕ FIDDLE, КОД ТОЛЬКО ЗДЕСЬ, ЧТОБЫ Я МОГУ СДЕЛАТЬ ЭТО ПОСТ): 

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/design.js"></script>
    </head>
    <body style="margin: 0;">
        <div class="navmenu">
            <ul style="list-style: none;" class="nav">
                <li>Home</li>
                <li>Purchase</li>
            </ul>
            <ul style="list-style: none;" class="navb">
                <li><a>Account</a></li>
            </ul>
        </div>
        <div class="features">
            <div class="featuresbox"><p class="FeatureTitle">Lorem Ipsum</p><p class="FeatureDescription">Lorem ipsum</p></div>
            <div class="featuresbox"></div>
            <div class="featuresbox"></div>
            <div class="featuresbox"></div>
        </div>
    </body>
</html>

CSS (СНОВА ПРОВЕРЬТЕ FIDDLE НЕ ИСПОЛЬЗУЙТЕ ДАННУЮ ФИГЛУ, ПОЯСНИТЕ ВАШУ МОЮ ПРОБЛЕМУ, НО НЕОБХОДИМО ЧИТАТЬ, ЧТО Я СКАЗАЛ ВЫШЕ): 

body {
    font-family: 'Arial Narrow Bold', sans-serif;
    background-color: rgba(84, 111, 219, 0.959);;
    margin-bottom: 15px;
}

.navmenu {
    width: 100%;
    display: flex;
    background-color: rgb(28, 109, 231);
    justify-content: space-between;
}

.navb {
    margin-right: 24px;
}

.navmenu > ul > li {
    float: left;
    color: rgb(255,255,255);
    font-size: 18px;
    margin-right: 50px;
}

.navmenu > ul > li:hover {
    transform: scale(1.03);
    color: rgb(119, 151, 240);
    transition: 0.4s;
}
.navmenu > ul > li:not(:hover) {
    transform: scale(1);
    color: rgb(255,255,255);
    transition: 0.4s;
}

.features {
    width: 100%;
    height: fit-content;
    margin-top: 50px;
    background-color: rgba(75, 105, 221, 0.651);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.featuresbox {
    height: 250px;
    width: 270px;
    border-radius: 4px;
    background-color: rgba(45, 81, 224, 0.651);
    float: left;
    margin: 25px;
    color: rgb(255,255,255);
}

.FeatureTitle {
    font-size: 25px;
    text-align: center;
}

.FeatureDescription {
    text-align: center;
    margin-left: 6px;
    margin-right: 6px;
}

@media screen and (max-width: 950px) {
    .navmenu > ul > li {
        font-size: 15px;
        margin-right: 33px;
    }
    .features {
        height: 300px;
    }
}

1 Ответ

1 голос
/ 03 мая 2020

Там есть небольшая ошибка, , когда вы только что ограничили features высоту div этим медиа-запросом : 

@media screen and (max-width: 950px) {
    .features {
        height: 300px;
    }
}

Так что, когда экран достигает 950px или понижает features высота div будет 300px, поэтому она не будет охватывать все поля там.

Все, что вам нужно сделать, чтобы исправить это, это удалить вышеуказанный стиль медиазапроса, а затем вы будет хорошо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...