Блог

У меня есть один медиа-запрос, который точно такой:

 @media only screen and (min-width: 1000px) {

    #main {
      width: 60vw;
      margin: 0 auto;
    }

    #title {
        width: 50%;
        margin: 60px 10vw 55px 10vw;
        border-radius: 10px;
  }

    #subtext {
        letter-spacing: .35em;
    }

    #img-div {
        float: right;
        margin: auto;
        margin-left: 40px;
        margin-top: 15px;
        display: inline-block;
    }

    #image {
        width: 10vw;
    }

    #tribute-info {
        width: 75%;
        margin: 10px 25px;
        border-radius: 15px;
        box-shadow: -8px 8px 8px rgba(0, 0, 0, .6);
    }

}
 

Однако он выделен серым цветом и не работает, когда я помещаю его в свой файл CSS, но работает, когда я помещаю его в отдельный файл CSS. Я убедился, что он находится в самом низу страницы, у меня <meta name="viewport" content="width=device-width, initial-scale=1.0"> в голове есть тег на моем html-документе, и моя таблица стилей CSS также правильно связана, поэтому я не уверен, что что-то не так.

Я бы не возражал просто иметь второй CSS-файл для медиа-запросов, но я должен загрузить его в codepen.io потому что это проект, который я делаю для freecodecamp.org, и я не знаю способа создать второй файл / поле CSS в codepen.

Скорее всего (по тому, что вы описываете), это связано с порядком правил CSS: вы всегда должны размещать медиа-запросы после обычных правил CSS, иначе они будут перезаписаны ими, так как они применяются ко всем размерам, даже если они следуют правилам, которые были введены в медиа-запросы до них.