Сергей delphinpro

const select = document.querySelector('select');// Берем первый селект на странице
select.addEventListener('change', () => {
  switch (select.value) {
    case 1:
      select.style.border = '1px solid red';
      break;
    case 2:
      select.style.border = '1px solid green';
      break;
    case 3:
      select.style.border = '1px solid blue';
      break;
  }
})

Обрабатываем все селекты

document.querySelectorAll('select').forEach(select => {
  select.addEventListener('change', () => {
    switch (select.value) {
      case 1:
        select.style.border = '1px solid red';
        break;
      case 2:
        select.style.border = '1px solid green';
        break;
      case 3:
        select.style.border = '1px solid blue';
        break;
    }
  })
})

для .container установлен min-height:100vh
вот он и становится равным 100vh

А чем, по-вашему, свойство baсkground-image отличается от всех других?

.block {
  background-image: url('image.jpg');
}
@media (max-width: 700px) {
  .block {
    background-image: url('image-small.jpg');
  }
}

<div class="servers">
  <p class="server-name">НМ</p>
  <p class="server-name">???</p>
  <img class="servers_image" src="content/nm11.png">
  <img class="servers_image" src="content/dont_know.png">
</div>

.servers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 3em;
}
.server-name{
    /* display: inline-block; */
    /* width: 10px; */
    /* position: relative; */
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    /* position: relative; */
    /* top: 25px; */
    /* left: 85px; */
  text-align: center;
}
.servers_image{
   height: 300px;
   /* width: 230px; */
   border-radius: 35px;
   /* margin-bottom: 3em; */
   /* margin-right: 50px; */
}

#content .hall-8 li:nth-of-type(-n+10) .item:nth-of-type(1) {
  margin-right: 190px;
}

/* Для экранов от 0 до 1999 px */
@media only screen and (max-width:1999px) {
  #content .hall-8 li:nth-of-type(-n+10) .item:nth-of-type(1) {
    margin-right: 100px;
  }
}

Порядок следования стилей имеет значение.

Когда вы выводите список ссылок нужно проверять, соответствуют ли они текущей странице

<a
  href="{{ route('somepage') }}"
  class="{{ route('somepage') == URL::current() ? 'active' : ''}}"
>

Можно и по другому сделать

https://qna.habr.com/q/610938
https://laravel.demiart.ru/detecting-active-links-...
https://laravel.ru/forum/viewtopic.php?id=1128

Это первые три ссылки из поисковика.
Задача тривиальная, решений масса, просто попробуйте поискать.

https://codepen.io/delphinpro/pen/RwJgaLa
Попробуйте убрать высоту у html и body и посмотрите, что станет с красным блоком.

Объяснение: высота (в т.ч. минимальная), заданная в процентах, может быть рассчитана только, если у родителя она явно задана.

Всё вы сделали правильно. И всё прекрасно работает.
https://codepen.io/delphinpro/pen/WNyoEGX

не нужно указывать никакую ширину

https://codepen.io/delphinpro/pen/vYrLoVz?editors=1100



------------

У вас

.third__main-special{
   display: flex;
-  justify-content: space-between;
 }
 .third__main-special-body{
   display: block;
-  width: 964px;
+  flex-grow: 1;
 }

Браузер пропустит медиа-блоки, которые не подходят.

В вашем случае на ширине 320 блок media (min-width: 480px) будет пропущен, ибо он означает стили, применяемые на ширине от 480 пикселей.

Или плюс состоит лишь в том, что браузер, когда читает файл делая это сверху-вниз, сначала натыкается на "мобильные" стили?

Именно так. мобильному браузеру не приходится анализировать всю таблицу стилей, что бы вычислить применяемый к элементу стиль. => меньше нагрузка => меньше разряд батареи и меньше тормозов (хотя тормоза это уж на совсем бюджетных моделях)

Кроме того, это отлично сочетается с подходом progressive enhancement. Вы верстаете простой блок для отображения в мобильном варианте, и постепенно улучшаете, расширяя его визуально и функционально на больших разрешениях.

потому что background-image
Если хотите комплексно задавать несколько свойств, то используйте просто background

Это невозможно.
Если по любой оси задано значение, отличное от visible, то на второй оси тоже не будет visible.

только что спрашивали
https://qna.habr.com/q/1210590

Язык страницы указывается на корневом элементе.

<html lang="ru">
<html lang="en">

от него и пляшите

html[lang=ru] {
  --base-font-size: 16px;
}
html[lang=en] {
  --base-font-size: 18px;
}

h1 {
  font-size: calc(var(--base-font-size) * 2)
}