Как исправить медиазапрос

Question

Нужно что бы при разрешении меньше 767 происходило перестроение в колонку

https://codepen.io/camobap6/pen/XWXpBez

.body{
  background-color:black;
  max-width:1280px;
  margin:0 auto;
 
  
}
.footer__copyright {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.14;
    color: #FFFFFF;
    margin: 0;
}
.footer__link {
    color: #FFFFFF;
    margin: 0 18px 0 0px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.12;
    text-decoration: none;
    display: inline;
}

.footer__link:hover {
    opacity: 0.8;
    transition: 0.9s;
}
.footer__link-style {
    list-style-type: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}
.footer {
    margin: 92px 48px 24px;
    max-width: calc(100% - 96px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media screen and (max-width:1279px) {
    .footer {
        margin: 88px 48px 24px;
    }
}

@media screen and (max-width:1023px) {
    .footer {
        margin: 88px 24px 24px;
    }
}

@media screen and (max-width:767px) {
    .footer {
       
        flex-direction: column;
    }
}

<div class ="body">
<footer class="footer">
            <nav class="footer__links">
                <ul class="footer__link-style">
                    <li class="footer__link-style"><a class="footer__link" href="https://yandex.ru/maps" target="_blank">Карты</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://yandex.ru/pogoda" target="_blank">Погода</a>
                    </li>
                    <li class="footer__link-style"><a class="footer__link" href="https://rasp.yandex.ru" target="_blank">Расписание</a>
                    </li>
                    <li class="footer__link-style"><a class="footer__link" href="https://calendar.yandex.ru" target="_blank">Календарь</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://travel.yandex.ru" target="_blank">Путешествия</a></li>
                </ul>
            </nav>
            <p class="footer__copyright">&copy; Иван Иванов </p>
        </footer>
  </body>

Answer 1

@media screen and (max-width:767px) {
     footer__link-style {
       display: flex;
       flex-direction: column;
       или 
       display: grid;
   }
}

БЛОГ НА HUSL

Как исправить медиазапрос

Ответы (1 шт):