Почему медиа-запрос не отображает flex для моей мобильной навигации? И я до сих пор не понимаю, как правильно структурировать? Любые рекомендации или советы? - PullRequest
Новая
       34

Почему медиа-запрос не отображает flex для моей мобильной навигации? И я до сих пор не понимаю, как правильно структурировать? Любые рекомендации или советы?

0 голосов
/ 17 января 2020

Я пытаюсь создать свой сайт. Мне нужно взять существующий код для уже созданного веб-сайта и сделать его совместимым с просмотром на мобильных устройствах. Для мобильного дисплея заголовок должен быть преобразован в другой формат. Когда я открываю свой сайт, мой телефон, сайт по-прежнему отображается правильно. Но когда он достигает ширины ниже 767 пикселей, мобильная навигация не включается и отображает изгиб. Просто гаснет и ничего не показывает

Я проверил все с помощью CSS и HTMl. Я шаг за шагом следовал инструкциям на YouTube и включил все, но по какой-то причине он все еще не отображается корректно на мобильных устройствах.

Мой код выглядит следующим образом

HTML

    <header> 
        <div class="mobile">
            <ul class="navlist-mob">
                <li>
                    <div class="hamburger">
                        <span class="topline"></span>
                        <span class="bottomline"></span>
                    </div>
                </li>
                <li><img class="logo" src="./assets/logo.svg" height="38" width="38" alt="Kushal Chaudhari"></li>
                <li></li>
            </ul>
        </div>
        <div class="desktop">
            <ul class="navlist-desk">
                <li><a href="index.html" class = "nav-item-text">About</a></li>
                <li><a href="#" class = "nav-item-text">Projects</a></li>
                <li><a href="#" class = "nav-item-text">Timeline</a></li>
                <li><img class="logo" src="./assets/logo.svg" height="38" width="38" alt="Kushal Chaudhari"></li>
                <li><a href="#" class = "nav-item-text">Favourites</a></li>
                <li><a href="#" class = "nav-item-text">Blog</a></li>
                <li><a href="#" class = "nav-item-text">Contact</a></li>
            </ul>
        </div>
    </header>
    <!---------------------------------------------------- navigation ends ----------------------------------------------------->

S CSS

:root {
    --ghost_white: #f8f8ff;
  }

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: "Open Sans",sans-serif;
    font-size: .875rem;
    font-weight: 400;
}
body{
    background-color: var(--ghost_white);
}

header{
    z-index: 999;
    position: fixed;
    width: 100%;
    // background-color: var(--ghost_white);
    // apple background
    background-color: rgba(0,0,0,0.82);
    backdrop-filter: blur(2rem);
    height: 3rem;

    .logo{
        padding: 0.2rem;
    }


    .mobile{
        width: 100%;
        //margin: 0 auto;
        padding: 0 1.2rem;
        //display: none;

    .navlist-mob{
        padding: 0 3rem;
        font-family: "Roboto",sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        list-style: none; 
        display: none;
        align-items: center;  
        justify-content: space-between;
    }

    }



    .desktop{
        width: 100%;
        //margin: 0 auto;
        padding: 0 1.2rem;
    }

    .navlist-desk{
        padding: 0 3rem;
        font-family: "Roboto",sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        list-style: none; 
        display: flex;
        align-items: center;  
        justify-content: space-between;

        .nav-item-text{
            display: block;
            letter-spacing: 0.07rem;
            text-decoration: none;
            color: #fff;
        }

        .nav-item-text:hover {
            color: #afd275;
        }
    }


}





.container {
    padding-top: 3rem;
    width: 100%;
}
@media screen and(max-width: 767px){
    .navlist-mob{
        display: flex;
    }
    .desktop{
        display: none;
    }

}

Заголовок становится пустым после 767 пикселей, когда он должен отображать flex для мобильной навигации. Помощь !!!

1 Ответ

0 голосов
/ 18 января 2020

Посмотрите, поможет ли это: https://codepen.io/panchroma/pen/vYEVQpK

Я изменил CSS в строке 98 с 

@media screen and(max-width: 767px){
    .navlist-mob{
        display: flex !important; 
    }

на 

@media screen and(max-width: 767px){
    .navlist-mob{
        display: flex !important;  /* NEW */
    }

Ваш дисплей: flex ; значение было отменено объявлением отображения: нет; в строке 47 вашего CSS

Удачи!

...