Media Query не перезаписывает css, даже если после

Question

Я сделал снимок экрана в google chrome devtools, чтобы помочь объяснить это.

Я использовал s css, который затем компилируется в css с использованием Koala. Медиа-запрос следует после оригинального css, то есть он должен быть перезаписан, однако это не так.

Любое объяснение приветствуется (я добавил несколько примеров кода, поэтому вам не нужно просматривать изображение)

Строка 190:

#recent-users, #frequent-trees{
  width: calc(50% - 80px);
  padding: 0px 40px;
}

Строка: 261:

@media only screen and (max-width: 600px) {
  #recent-users, #frequent-trees {
    width: 90%;
    padding: 0px 5%;
  }
}

Answer 1

Если вы внимательно посмотрите, селектор:

#content #recent-users, #content #frequent-trees

Вы можете установить то же самое для медиазапроса:

@media only screen and (max-width: 600px) {
  #content recent-users, #content #frequent-trees {

или использовать правило !important для его переопределения:

@media only screen and (max-width: 600px) {
  #recent-users, #frequent-trees {
    width: 90% !important;
    padding: 0px 5% !important;
  }
}

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

Селектор #content #recent-users более конкретен c, поэтому используйте его в медиа-запросе:

@media only screen and (max-width: 600px) {
  #content #recent-users, #content #frequent-trees {
    width: 90%;
    padding: 0px 5%;
  }
}