Сергей delphinpro

Canvas – это растр. Нарисованная линия ничем не будет, кроме набора пикселей на холсте.
Вы можете сохранять параметры линии, по которым сможете нарисовать ее заново. Но вы не можете сохранить саму линию.

function makeItem(title) {
  return `<a class="dropdown-item"><i class="icon icon-line-circle"></i><span>${title}</span></a>`;
}

fetch('../russia.json')
  .then(response => response.json())
  .then(json => {
    const itemsHtmlString = json.map(item => makeItem(item.city)).join()
    $('.search__city .dropdown-menu').html(itemsHtmlString);
  });

для .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; */
}

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

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

Опечатка в названии параметра https://swiperjs.com/swiper-api#param-slideClass

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

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. Вы верстаете простой блок для отображения в мобильном варианте, и постепенно улучшаете, расширяя его визуально и функционально на больших разрешениях.

https://developer.mozilla.org/ru/docs/conflicting/...

Потому что происходит переход по ссылке, а не отправка формы.
Кто вас надоумил внутрь кнопки положить ссылку? Вам бы основы html изучить сначала...

<form action="reverse.php">
  <div class="group">
    <center><button>Далее</button></center>
  </div>
</form>

Самое время подумать =)

Наверное, потому, что класс вы переключаете как раз у .accordion :
self.classList.toggle('open');

Хотя вроде и получаете нужные элементы:

const control = self.querySelector('.accordion__control');
const content = self.querySelector('.accordion__content');

Ну и стоит учесть, что стили у вас прописаны для .accordion__tittle.open, а получаете вы .accordion__control.

Этих наводок достаточно, что бы самому найти решение проблемы?

document.getElementById('div1').innerHTML = 'I am first div';
document.getElementById('div2').innerHTML = 'I am second div';

// В браузере норм сработает и с пробелами. Просто оберните в тег ссылки.
$txtphone = trim($_POST['phone']);
$txtphone = "<a href='tel:$txtphone'>$txtphone</a>";

// Для телеги вырежьте все, кроме цифр
$phone = strip_tags($_POST['phone']);
$phone = preg_replace('/\D/', '', $phone);
$phone = '+'.$phone; // Плюсик вернем.

Не задавайте ширину в пикселях.

Вы можете задать flex-wrap: wrap;
Но красный блок перескочит под зеленый.
У вас явная двумерная раскладка => стоит подумать об использовании гридов.
Или добавлять ещё один враппер для nav и main

UPD:

<div class="search">
  <input class="search__input" type="text">
  <button class="search__button" type="button">Go!</buton>
</div>
<script>
  [...document.querySelectorAll('.search')].forEach(block => {
    block.querySelector('.search__button').addEventListener('click', () => {
      window.location.href = 'https://123.ru/' + block.querySelector('.search__input').value;
    });
  });
</script>