alex-1917

Ппц, море таблиц)))
В блоке noindex у вас хреньотгугла, блок с ID=aswift_1_expand получает вот такие стили:

display:inline-table;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:1200px;background-color:transparent;

width:1200px!!!
Вобщем, гасите гугл

<noindex style="display: none">
...
</noindex>

Список необходимых библиотек:
1. html
2. css
3. js

Вот этот слайдер попробуй, навряд ли он что-то сломает
https://github.com/loryjs/lory
С другой стороны, не припомню таких грешков за сликом...

wow-эффекты - удел 2000-2010-х годов.
довольно много заказчиков всё ещё там сидят...

Я расчитывал, что результаты будут примерно одинаковы(+/- 5 единиц), но здесь колосальная разница..

да уж..
а с какого перепоя ты был так уверен?
такого не было никогда - ни на старой версии сервиса, ни на текущей...
бывает и побольше разница, 50 баллов и больше.
по факту - у тебя там подшаманить по мелочи-то, картинки лэйзи-лоадни, часть скриптов в опу переставь и стили туда же.
естсессно, что все надо делать не нагугливанием, а адекватно, например, тот же лэйзи-лоад - только по скроллу страницы плюс если страница проскролена на полэкрана, остальные широкораспространенные методы лэйзи для гугл-pagespeed бесполезны0))

4 удаленно подгружаемых шрифта для лендинга поселкового уровня? ОоОООоо...

ну и плюс банальщина:

Наверное, пришла пора отписаться и от этого тега CSS
Наплыв студентоты, катастрофично боящейся погуглить, зашкаливает...

Отправьте ему ценник на третий шаблон, для отображения в корявых имитаторах.

да, и что именно поломал не пойму. Уже и на разных мобильных устройствах проверял.

1. Скачай WinMerge
2. Установи сабж из п.1
3. Подсунь сабжу из п.2 два файла - исходник и текущий
4. Одень очки.
5. Смотри на экран.

В одном из ответов избыточный код, адекватнее надо кодить, адекватнее:
Было:

.btn:before {
  content: '';
  display: block;
  border-left: 2px solid #ed6a37;
  border-top: 2px solid #ed6a37;
  border-top-left-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  top: -7px;
  left: -7px;
  transition: all 0.5s;
}

.btn:after {
  content: '';
  display: block;
  border-right: 2px solid #ed6a37;
  border-bottom: 2px solid #ed6a37;
  border-bottom-right-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: -7px;
  right: -7px;
  transition: all 0.5s;
}

Стало:

.btn:before,.btn:after {
content: '';
color:#ed6a37;
border-style:solid;
border-top-left-radius: 25px;
width: 25px;
height: 25px;
position: absolute;
transition: all 0.5s;
}
.btn:before {
border-width:2px 0 0 2px;
border-top-left-radius: 25px;
top: -7px;
left: -7px;
}

.btn:after {
border-width:0 2px 2px 0;
border-bottom-right-radius: 25px;
bottom: -7px;
right: -7px;
}

И еще чуть посожмём:

.btn:before,.btn:after{content:'';color:#ed6a37;border-style:solid;border-top-left-radius:25px;width:25px;height:25px;position:absolute;transition:all .5s}
.btn:before{border-width:2px 0 0 2px;border-top-left-radius:25px;top:-7px;left:-7px}
.btn:after{border-width:0 2px 2px 0;border-bottom-right-radius:25px;bottom:-7px;right:-7px}

Определять пропорцию через JS - тупиковый путь.
На аналогичную задачу убил вагон времени, в итоге пришел к получению с сервера реальных ширины и высоты картинки, чуть запрос пришлось переписать.
В JS сравниваю эти два числа, профит.
Просто вовремя осенило - на сервере ведь уже хранятся размеры загруженных картинок, WHY NOT?
Как у вас - хз, возможно так не прокатит.

а так?
text-align-last: center; text-align: center;

или так?

select { 
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}

А я думал, эти дизайны не более чем витрина рисовальщика.
Неужели есть отщепенцы, кто заказывает это как реальный веб-сайт???
ООООоооОо, даже чекбоксы с градиентом... писец...

Тут яндекс карта вообще не нужна.
map+area. По клику вызывать что надо - контакты офиса или чо там... Подложку сделать той самой зеленой картинкой. Там еще и градиент...
Ну какие тут яндекс-карты??)) Чтобы банально перекрасить балун, нужен код длиной в целых три строки, не дадут они вам такое отображение, да и в коде полвагона мусора тянется с этими яндекс-картами, сходите вечером в головному офису, посмотрите, что за народ выходит - школьник, школьник, студент, школьник, дядя, школьник, студент, студент. Это разработчики яндекса....
Или на худой конец SVG
www.amcharts.com/svg-maps/?map=germany

www.jooom.ru/toster/css1.html

Блок с градиентом делать через псевдоэлемент -ошибка, у тебя же там текст с оформлением должен быть?.
Еще один блок делай и вся недолга.
Ну а насчет псевдоэлемента и анимации - все работает, у тебя где-то ошибка в твоем секретном коде...
www.jooom.ru/toster/css1.html

на примере цены и кнопки "удалить":
это вложенная в ячейку таблица об одной строке и двух ячейках.
Для мобильных делайте для ячеек этой таблицы дисплей-блок и ячейки встанут друг над другом.
Остальные элементы аналогично

Конечно же правильнее так:
background-color:
Опустим вопросы наследования, группирования и каскадирования в CSS, самое главное - вы на самом деле готовы устроить драку из-за ШЕСТИ СИМВОЛОВ???
Это что, новая эпидемия или вы начитались гугла?

Самое интересное, сами разработчики предупреждают, что флексы - не для всего на свете, но нет, это стильно-модно-моложежное поколение упорно жрет ёжиков.
СЛЕДИ ЗА ПРЕДЛОГАМИ:
Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
Используйте CSS Grid для двумерных макетов (строк И колонок).

мы верстали подобное, в таких хитровыпупыренных макетах главное понять, где вы, кто вы и где дизайнер и кто он такой)),
после понимания приходит верное решение.
мы обошлись ОДНИМ png-спрайтом весом в 12кБ
не модно, не стильно, не молодежно
ЗАТО:
работает
железобетонно
проект оплачен