Сергей delphinpro

Опечатка в названии параметра 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>

Сделайте обертку над контейнером, которой и задайте линию.

.wrapper
  .container

.wrapper {
  border-bottom: 1px solid red;
}

правильно

Шапку и подвал вынести в отдельный файл стилей. Подключать везде. Задать уникальные селекторы, чтобы не пересекались со старыми.
А дальше лучше редизайнить по одной странице. Переверстал страницу, подключил на ней новые стили.
А иначе будет боль. Да еще и новый код загадите.
Как вариант – редизайнить по-блочно. Переверстал кнопки. Выпили все старые стили для кнопок, и подключил новые. Применяется сразу ко всем страницам.

А то, что вы хотите сделать очень уж костыльно выглядит.

<div class="my-div" style="--image:url([+image+]); --image-hover:url([+image_hover+])">
</div>

.my-div {
  /* по умолчанию, если не задано в разметке */
  --image: none;
  --image-hover: none;

  background-image: var(--image);
}
.my-div:hover {
  background-image: var(--image-hover);
}

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

<!-- так -->
<div class="my-div" style="--image:url(/[+image+])"></div>
<!-- или так -->
<div class="my-div" style="--image:url([(site_url)][+image+])"></div>

Теги не закрыты


Если бы вы писали код нормально, а не через ж (это я про html в строках), то IDE вам бы указала на эти опечатки.

window.matchMedia !!!
resize неэффективен.