devstudent

это невозможно сделать на джейквери. передайте переменную с изображениями из php в джавасрипт а дальше хоть с джейквери хоть без него ...

на вашей странице не хватает жизни: ховеров, анимаций. это очень важно

media (max-width: 1279px) and (min-width: 768px)
main.css:7806
.slider-index-banner2__name {
    margin-top: 0;
}

обнуляем марджин - и вот уже тайтл не обрезается, и так далее смотрите, верхние паддинги и марджины

добавить

$(document).mouseup(function (e){// обрабатываем клик в любой точке 
		  if (jQuery(e.target).closest(".show-block").length > 0){ // проверка , произошел ли клик вне элемента, который надо по этому клику скрыть
		  	 return false; // клик по элементу игнорируем 
		  }
		  
		  else $(".show-block").hide(300);// клик вне элемента
       clickCount = 1;
		 });

в

<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Личный кабинет</b> <span class="caret"></span></a>

сделать
aria-expanded="true"
вот так

<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><b>Личный кабинет</b> <span class="caret"></span></a>

возможно даже на <span> сверстать, использовать 3d трансформацию css и позиционирование z-index ,флекс тут вообще не нужен, как любая другая система

Owl Carousel или bx slider вот так как минимум, а вообще еще парой десятков способов

В общем основная проблема, что не могу уложить в голову всю целостную картину и логика проекта.

так она (логика проекта) должна быть в голове изначально, а не потом, когда написан код. как это вообще у вас выходит наоборот делать?

а использовать в запросах ориентацию экрана?у нетбуков она всегда landscape ...

у меня хром и фаерфокс одинаково отображают, а вообще это явно встроеные стили браузера мешают , смотрите внимательно, outline и box-shadow например

Меняйте сss

у меня облака летали так

.cld {
 background-image:url(../images/clouds.png);
 width:100%;
 height:330px;
 position:fixed;
 background-repeat:repeat-x;
 background-position:0 0;
  animation: city 40s linear infinite;
    -webkit-animation: city 40s linear infinite;
  }
 
   
   @keyframes city {
    from { background-position: -1400px 0;}
    to { background-position:right top;}
   }
    @-webkit-keyframes city {
    from { background-position: -1400px 0;}
    to { background-position: left top;}
   }

не мерцали

а если попробовать :first-of-type , который ищет 1-ый элемент именно данного типа то есть тег /p> у родителя, может перед ним есть другой элемент, поэтому ваш селектор и не находит то что вы хотите

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

удобнее менять классы и в них описывать анимацию , во всех смыслах удобнее

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