Блог

Я пытался загрузить на свой сайт вымышленный сайт, который я превратил в курс. Я загрузил его в следующем месте:https://codehero.life/projects/omnifood/index.html

Проблема в том, что медиа-запросы работают просто отлично, когда я пытаюсь использовать сайт на localhost. На локальном хостинге все просто отлично работает. Однако на сайте запросы просто не работают. Я внедрил меню для гамбургеров, когда оно мобильное, но ничего подобного не происходит, я получаю пустые места и т.д. Вы можете проверить, перейдя по ссылке выше.

Я внедрил тег ‘viewport’, удалил комментарии из своего кода, все еще не работает. Даже пытался поместить весь файл медиа-запроса в мой styles.css, а не отдельный CSS, но все равно не работает. Я пробовал использовать ‘только медиа’ и ‘media’ также, не работает. Где я ошибаюсь?

Вот запросы.css

 
@media screen and (max-width: 1200px){
    .hero-text-box{
        width: 100%;
        padding: 0 2%;
    }

    .row{padding: 0 2%;}
}

@media screen and (max-width: 1023px){
    body{font-size: 18px;}

    section{padding: 60px 0;}

    .long-copy{
        width: 78%;
        margin-left: 11%;
    }

    .steps-box{margin-top: 10px;}
    
    .steps-box:last-child{margin-top: 10px;}
    
    .work-steps{margin-bottom: 40px;}
    
    .work-steps:last-of-type{margin-bottom: 60px;}

    .app-screen{width: 50%;}

    .icon-small{
        width: 17px;
        margin-right: 5px;
    }
    .city-feature{font-size: 90%;}

    .plan-box{
        width: 100%;
        margin: 0;
    }

    .plan-price{font-size: 250%;}

    .contact-form{width: 80%;}
}

@media screen and (max-width: 767px){

    body{font-size: 16px;}
    section{padding: 30px 0;}
    .row,.hero-text-box{padding: 0 4%;}

    .col{
        width: 100%;
        margin: 0 0 4% 0;
    }

    .main-nav{display: none;}
    .mobile-nav-icon{display: inline-block;}

    .main-nav{
        float: left;
        margin-top: 25px;
        margin-left: 25px;
    }

    .main-nav li{
        display: block;
    }

    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited{
        padding: 10px 0;
    }

    .sticky .main-nav{ margin-top: 10px;}

    .sticky .mobile-nav-icon i{color: black;}
    .sticky .mobile-nav-icon {margin-top: 10px;}

    .long-copy{
        width: 100%;
        margin-left: 0;
    }

    h1{font-size: 180%;}
    h1{font-size: 150%;}

    .work-steps{margin-bottom: 20px;}
    
    .work-steps:last-of-type{margin-bottom: 20px;}

    .work-steps div{
        
        height: 40px;
        width: 40px;
        padding: 4px;
        margin-right: 15px;
        font-size: 120%
    }

    .center-box{
        text-align: center;
    }

    .section-features{
        text-align: center;
    }

}

@media screen and (max-width: 480px){
    section{padding: 25px 0;}
    .contact-form{width: 100%;}

}
  

Заголовок html

 <meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
  

Кажется, что это работает просто отлично, когда я проверил это с помощью реального телефона. Я использую Edge Dev на ПК, поэтому, возможно, он показывает мне кэшированную копию сайта или, возможно, инструменты разработки не работают должным образом. Удалось проверить из-за комментариев.

Потому что css читается сверху вниз. Правило, которое устанавливается последним, — это то, которое будет выполняться. Пожалуйста, убедитесь, что вы разместили все свои медиа-запросы внизу ваших css-файлов.

 @media (max-width: 600px) { //If my screen fits this size
   .your-class {
       color: black; //Paint it black
    }
}

.your-class {
    color: blue; //Now, forget about everything and paint it blue!
}