@eXxxx
Начинающий frontend разработчик

Почему не работает Медиа запрос?

<header class="header">
        <div class="container header__container">
            <div class="row">
                <div class="col-12 header__content">
                    <div class="header__menu" id="burger">
                        <span class="menu__span"></span>
                        <span class="menu__span"></span>
                        <span class="menu__span"></span>
                    </div>
                    <svg class="header__svg" width="94" height="21" viewBox="0 0 94 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    </svg>
                    <div class="header__block" id="menu">
                        <nav class="header__nav">
                            <ul class="header__list">
                                <li class="header__item">
                                    <a href="#" class="header__link">
                                        Главное
                                    </a> 
                                </li>
                                <li class="header__item">
                                    <a href="#" class="header__link">
                                        О нас
                                    </a>
                                </li>
                                <li class="header__item">
                                    <a href="#" class="header__link">
                                        Преподаватели
                                    </a>
                                </li>
                                <li class="header__item">
                                    <a href="#" class="header__link">
                                        Курсы
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>


.header {
    background-color: var(--blue);
}

.header__container {
    padding-top: 29px;
    padding-bottom: 29px;
}

.header__content {
    display: flex;
    justify-content: space-between;
}

.header__svg {
    flex-shrink: 0;
}

.header__list {
    display: flex;
    justify-content: center;
}

.header__item:not(:last-child) {
    margin-right: 57px;
}

.header__link {
    color: var(--white);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}






.header__menu {
    display: none;
    position: absolute;
    background-color: inherit;
    left: 4%;
    min-width: 40px;
    min-height: 24px;
    cursor: pointer;
    z-index: 10;
    border: none;
    outline: none;
}

.menu__span {
    position: absolute;
    background-color: #fff;
    width: 25px;
    height: 2px;
    left: 0;
    transition: transform .3s ease-in-out ,opacity .1s ease-in-out, background-color .1s ease-in;
    will-change: transform;
} 

.menu__span:first-child {
    transform: translateY(-10px);
}

.menu__span:nth-of-type(3) {
    transform: translateY(10px);
}


/* Rect */

.header.open .menu__span:first-child {
    transform: translateY(0) rotate(45deg);
}

.header.open .menu__span:nth-of-type(2) {
    opacity: 0;
}

.header.open .menu__span:nth-of-type(3) {
    transform: translateY(0) rotate(-45deg);
}

.header__menu:active .menu__span {
    background-color: black;
}





@media (max-width: 767px) {

    /* Header */

    .header__content {
        flex-direction: column;
        align-items: center;
    }

    .header__block {
        margin-top: 32px;
    }

    .header__item:not(:last-child) {
        margin-right: 30px;
    }


Медиа запрос по факту применяется но не на том пикселе который указан в запросе,а на пиксель ниже.Т.е свойства в данном запросе применяются на ширине экрана 766 пикселей.В медиа меняю ширину делаю 766 стили применяются на 765-ом пикселе,но интересное то что на брейкпойнте 992 пикселя у меня все работает как надо,начиная с максимальной ширины 992.И в devtools даже не показывает что у меня есть медиа запрос.Мета,вюпорт проверял,опечатки проверял,подключен бутстрап,вложенность по классам не делал вроде
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы