machetero
@machetero
gotlib.me

Почему медиа-запрос @media не применяется?

У меня на сайте gotlib.me не применяется медиа-запрос. В инструментах разработчика в разделе Sources можно видеть скачанный файл Assets/style_layout.css Там внизу медиа-запросы
@media screen and (max-width: 768px){
    .main{
		box-sizing:border-box;
        width:100%;
        margin: 0;
        border-radius: 0;
		padding:20px;
    }
	
	nav{
		width:240px;
		display:inline-block;
	}
	
	header{
		display: none;
	}
	
    header form{
        display:none;
    }
	
    .cookie_accept{
		width:100%;
		padding:15px;
    }

    .mobile-menu{
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 30px;
        transition: .5s;
        opacity: 1;
        background: #FFFFFF;
        z-index: 2;
        padding: 0 10px 10px 10px;
        border-radius: 5px;
        opacity: 1;
        transition: .5s;
        text-align: center;
        box-shadow: 10px 0px 25px 0 #000;
    }

    .menu-hidden{
        opacity: 0;
        position: fixed;
        top:-100%;
        transition: .5s;
    }

    .mobile-menu .langs{
        border-bottom: 1px solid #000000;
        margin: 0 0 10px 0;
        width: 33%;
        display: inline-block;
        text-align: center;
    }

    .mobile-menu nav{
        border-bottom: 1px solid #000000;
        margin: 0 0 10px 0;
        width: 33%;
        display: inline-block;
        text-align: center;
    }

    .mobile-menu .langs a {
        box-sizing: content-box;
        text-align: center;
        padding: 5px 5px;
        text-decoration: none;
    }
    .mobile-menu nav a {
        box-sizing: content-box;
        text-align: center;
        padding: 5px 5px;
        text-decoration: none;
    }
}

@media screen and (min-width: 769px) {
    .mobile-menu {
        opacity: 0;
        position: fixed;
        top: 0px;
        right: -100px;
        transition: .5s;
    }

    .menu-icon {
        display: none;
    }

    .icon-stripe:after,
    .icon-stripe:before {
        display: none;
    }
}

Они должны прятать шапку на брейкпоинте меньше 768px
<meta name="viewport"  content="width=device-width,  initial-scale=1">
тоже стоит
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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