Не получается адаптивная верстка. Flex не работает так как надо

Question

Не получается адаптивная верстка. Flex не работает так как надо

Рейтинг: 0Ответов: 0Опубликовано: 23.03.2023

Не пойму что делаю не так. По идее, на всех устройствах с разрешением до 767 пикселей кнопка должна уезжать вниз, а текст ставиться наверх. Но так не работает. Что делаю не так?

    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
    footer {
        background-color: #000;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
    }

    .footer-text {
        
        text-align: left;
        margin-right: 20px;
        margin-top: 20px;
    }

    form {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    input[type="email"] {
        padding: 10px;
        border: none;
        margin-right: 5px;
    }

    button[type="submit"] {
        display: flex;
        padding: 10px 20px;
        background-color: #000;
        color: #F5F5F5;
        border: 1px solid #F5F5F5;
    }

    .footer-input {
        padding-top: 20px;
    }

    .lbl {
        margin-left: 5px;
    }
    @media (max-width: 767px) {
       .footer-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-input {
       margin-top: 20px;
       margin-bottom: 20px;
    }

    .footer-text {
       margin-top: 0;
    }

      button[type="submit"] {
        margin-top: 20px;
    }
    }

      @media (min-width: 768px) and (max-width: 1023px) {
       .footer-content {
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: flex-start;
    }

     .footer-input {
       margin-top: 20px;
    }

     .footer-text {
       margin-top: 0;
       margin-right: 20px;
    }

     button[type="submit"] {
       margin-left: auto;
       margin-top: 0;
    }
   }

    @media (min-width: 1024px) {
     .footer-content {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

     .footer-input {
        margin-top: 0;
     }

     .footer-text {
        margin-right: 20px;
     }

     button[type="submit"] {
     margin-left: auto;
     }
     }


</style>
</head>

<body>
<footer>
    <div class="footer-content">
        <form>
            <div class="footer-text">
                <p>ПОДПИШИТЕСЬ НА РАССЫЛКУ</p>
                <p style="font-size: 12px;">УЗНАВАЙТЕ ПЕРВЫМИ О БУДУЩИХ <br>МЕРОПРИЯТИЯХ B&amp;D</p>
            </div>
            <div class="footer-input">
                <span><input type="email" size="50" placeholder="Введите ваш email"></span><br>
                <input type="checkbox" id="consent-checkbox" name="consent-checkbox">
                <label for="consent-checkbox" class="lbl" style="color:#F5F5F5; font-size: 10px;">Вы даете согласие на обработку персональных данных</label>
            </div>
            <button type="submit">ПОДПИСАТЬСЯ</button>
        </form>
    </div>
</footer>

css html adaptive flexbox

Источник: Stack Overflow на русском

Не получается адаптивная верстка. Flex не работает так как надо

Ответы