ProjectSoft

/* вертикальное положение */
@media (orientation: portrait) {
	/*** Стили ***/
}

/* горизонтальное положение */
@media (orientation: landscape) {
	/*** Стили ***/
}

Или так, но принцип один.

$('.priceSort-table__item td:nth-child(2)').each(function(){
	var item = $(this),
		parent = item.closest('tr'),
		text = item.text(),
		regex = /(\d+)(?:х|x)?/g,
		match = text.match(regex),
		arr = [];
	while ((m = regex.exec(text)) !== null) {
		arr.push(m[1]);
	}
	item.text(arr.join(" "));
	arr.forEach(function(dig, idx){
		switch(idx){
			case 0:
				parent.addClass('l' + dig);
				break;
			case 1:
				parent.addClass('w' + dig);
				break;
			case 2:
				parent.addClass('h' + dig);
				break;
		}
	});
});

В CSS3 поддерживается обратная совместимость.
Поэтому использование :after возможно.
Соответственно если вы собираетесь поддерживать старые браузеры, а вернее заказчик настаивает- то используйте старое написание.

flexbox в помощь jsfiddle.net/b3a1c5x8

Берёте отдельный див и на него вешает background данной картинки.
td - position relative
для div c background - position absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 0. Применяете blur для данного div.

<td class="td" rowspan="4" width="20%">
	<div class="bg"style="filter: blur(px);background-image: url('https://image.gametracker.com/images/maps/160x120/cs/de_dust2_2x2.jpg');box-shadow:         inset 0px 0px 10px 0px rgba(50, 50, 50, 0.75);"></div>
	<div class="addon-installed" style="-webkit-box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);-moz-box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);padding-right: 5px;width: max-content;margin-right: -2px;margin-top: -63px;text-align: center;">Сервер выключен =(</div>
</td>

.td {
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left:0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
}
.addon-installed {
  z-index: 1;
  position: relative;
}

И перенесите все инлайновые стили в css файл.

Условие надо делать раньше. До того, как вы начинаете обращаться к свойствам найденных объектов.
https://codepen.io/anon/pen/qybqEw

Используйте регулярку
https://regex101.com/r/WG5LYZ/1/
И обрабатывайте результат в нужный вам формат

https://html5book.ru/css3-columns/

Настройте MIME типы на сервере.

Для начало попробуйте через .htaccess

AddType font/ttf 				.ttf
AddType font/eot 				.eot
AddType font/otf 				.otf
AddType x-font/woff 				.woff
AddType font/woff2 				.woff2

Если Content-type не изменится и вы не можете самостоятельно настроить заголовки для типов файлов - обратитесь в тех. поддержку Jino

Как должно быть

Крутите на свой вкус и цвет)))
https://snazzymaps.com/editor

Ещё вариант
jsfiddle.net/ceahnys0

Ещё вариант
jsfiddle.net/enrvfm9u

Сергей Бурдужа, вы подписываете две функции на одно событие. С таким же успехом можно всё написать выше этих функций, а сами функции выкинуть. Так нельзя и не надо делать.

Нужно приблизительно так.
(Код ещё можно оптимизировать)

(function($){
	var windowSize = 1140,
		isDesktop = !($(window).width() < windowSize),
		$categoriesWrap = $('.categories-wrapper'),
		$headerMain = $('header'), // Скорее всего что-то типа так
		headerMainHeight = $headerMain.height(),
		scrollTop = $(window).scrollTop(),
		forDesktop = function(){
		
		!$categoriesWrap.is(":visible") && $categoriesWrap.css({'display': 'block'});
			
			scrollTop = $(window).scrollTop();
			
			if(scrollTop < headerMainHeight  + 10){
				$categoriesWrap.removeClass('fixed');
				$categoriesWrap.css('display', 'block');
				$categoriesWrap.css('opacity', 1);
			} 
			
			if(scrollTop > headerMainHeight  + 10) {
				$categoriesWrap.css('opacity', 0);
				$categoriesWrap.css('display', 'block');
			}
			
			if(scrollTop > headerMainHeight  + 100) {
				$categoriesWrap.addClass('fixed');
				$categoriesWrap.css('opacity', 1);
			}
		},
		forMobile = function(){
			
			$('body').css('padding-top', 100);
			
			$categoriesWrap.is(":visible") && $categoriesWrap.css({'display': 'none'});
			
			scrollTop = $(window).scrollTop();
			
			if(scrollTop > headerMainHeight  + 10) {
				$categoriesWrap.hide();
			}else if(scrollTop < headerMainHeight  + 10){
				headerMain.removeClass('fixed');
				$categoriesWrap.hide();
			}
			
			if(scrollTop > headerMainHeight  + 100) {
				headerMain.addClass('fixed');
			}
		};
	// Подписываемся на события
	$(window).on('resize scroll', function(e){
		isDesktop = !($(window).width() < windowSize);
		headerMainHeight = $headerMain.height();
		isDesktop ? forDesktop() : forMobile();
	});
	
	// Запустим
	isDesktop ? forDesktop() : forMobile();
	
}(jQuery));

Ещё вариант
jsfiddle.net/x5j1b9cm

Как такового события нет у input.

https://codepen.io/anon/pen/BVbdOz
Оно?

Док: https://pugjs.org/language/iteration.html

Сразу со второго вопроса.
Как вариант. Но для каждого брекпоинта (@media) писать нужные (иные) условия, если требуется для адаптации
jsfiddle.net/mo5Ljkf2

По первому вопросу проблем вообще не вижу. Стандартная вёрстка.
А дизайнеру за центрирование по жопе надавать )))

Не известно что и как у вас по логике вёрстки, форм, etc.
Поэтому пример только для сбора всех заполненных input файлов.
Используем FormData

<!DOCTUPE HTML>
<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<button id="click">Test</button>
		<script>
			var btn =document.getElementById('click');
			click.addEventListener('click', function(e){
				var files = document.querySelectorAll('input[type="file"]'),
					fd = new FormData();
				if(files){
					files.forEach(function(input, index, list){
						if(input.files.length){
							fd.append("filesUpload[]",input.files[0]);
						}
					});
				}
				// вывод для теста
				console.log(fd.getAll('filesUpload[]'));
				// Отправляем ajax
				// Повесить обработчики отправки!!!!
				var request = new XMLHttpRequest();
				request.open("POST", "http://localhost/submitform.php");
				request.send(fd);
			});
		</script>
	</body>
</html>

jsfiddle.net/c8mLedyx/embedded/result,js,css,html
Ну и стилизуем как вам надо.
Т.е. описываем свой файл slick-theme.css

Вы пытаетесь на JS писать в PHP
Правильно так

<?php
// Если устройства не iPhone|iPad|iPod
if( !preg_match('/iPhone|iPad|iPod/i', $_SERVER ['HTTP_USER_AGENT']) ) {
	echo '<script src="/js/myscript.js"></script>';
}
?>