Медиа-запрос не применяется при необходимости - PullRequest
Новая
       8

Медиа-запрос не применяется при необходимости

0 голосов
/ 15 октября 2018

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

Проблема в том, что мои «медиа-запросы» вообще не работают.

Вот моя версия кода: https://codepen.io/anon/pen/WaXpda

Вот версия stackoverflow: 

.header-menu-toggle {
    position: fixed;
    left: 12px;
    top: 12px;
    width: 48px;
    height: 45px;
    line-height: 45px;
    font-family: 'Exo', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    color: black;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.header-menu-toggle::after {
    display: inline-block;
    content: "Menu";
    height: 45px;
    left: 35px;
    text-align: right;
    padding-left: 15px;
    padding-right: 10px;
    position: absolute;
    top: 0;
    right: 100%;
}

.header-menu-toggle:hover, .header-menu-toggle:focus {
    color: #CC147C;
}

.header-menu-icon {
    display: block;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    right: auto;
    bottom: auto;
    background-color: black;
    position: absolute;
    left: 11px;
    top: 50%;
}

.header-menu-icon::before, .header-menu-icon::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: inherit;
    position: absolute;
    left: 0;
}

.header-menu-icon::before {
    top: -9px;
}

.header-menu-icon::after {
    bottom: -9px;
}
@media screen and(max-width:768px){
  .header-menu-toggle{
    left:300px; /*middle, just for testing*/
  }
}
<div id="firstPage" class="firstPage">
            <a onclick="openNav()" class="header-menu-toggle" href="#0">
                <span class="header-menu-icon"></span>
            </a>
        
 </div>

Проблема в том, что, когда ширина экрана ниже 768 пикселей, текст меню должен быть перемещен в середину.Тем не менее, этого не происходит, я попытался сбросить цвета, и они работают нормально.Просто позиционирование не так.

Большое спасибо за то, что потратили время на ответ на этот вопрос, даже за то, что прочитали его.

1 Ответ

0 голосов
/ 15 октября 2018

Синтаксическая ошибка.

В вашем запросе отсутствует пробел 

.header-menu-toggle {
    position: fixed;
    left: 12px;
    top: 12px;
    width: 48px;
    height: 45px;
    line-height: 45px;
    font-family: 'Exo', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    color: black;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.header-menu-toggle::after {
    display: inline-block;
    content: "Menu";
    height: 45px;
    left: 35px;
    text-align: right;
    padding-left: 15px;
    padding-right: 10px;
    position: absolute;
    top: 0;
    right: 100%;
}

.header-menu-toggle:hover, .header-menu-toggle:focus {
    color: #CC147C;
}

.header-menu-icon {
    display: block;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    right: auto;
    bottom: auto;
    background-color: black;
    position: absolute;
    left: 11px;
    top: 50%;
}

.header-menu-icon::before, .header-menu-icon::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: inherit;
    position: absolute;
    left: 0;
}

.header-menu-icon::before {
    top: -9px;
}

.header-menu-icon::after {
    bottom: -9px;
}
@media all and (max-width:768px){
  .header-menu-toggle{
    left:300px; /*middle, just for testing*/
  }
}
<div id="firstPage" class="firstPage">
            <a onclick="openNav()" class="header-menu-toggle" href="#0">
                <span class="header-menu-icon"></span>
            </a>
        
 </div>

PS.Извините за потраченные 2 часа :(

...