Антон Литвиненко

Вот эта картинка выпирает

Адаптивным картинкам нужно давать max-width: 100%

Как отследить с какой кнопки отпралена заявка wordpress?

$('.кнопка_которая_открывает_модалку').on('click', function (e) {
  e.preventDefault();
  var $data = $(this).parents('.селектор_одного_итема').find('.обертка_в_которой_все_данные').html(); // выбрали все данные
  $('.тут_селектор_модалки').find('.обертка_в_которую_будем_вставлять_данные').html($data); // вставляем данные в модалку
  // тут код который открывает модалку или что там у вас
});

Вообще формат времени и даты стандартно настраивается в Настройки > общие

дать заголовку data-title="Портфолио"
передать data-title в content псевдоэлемента, привязанного к заголовку content: attr(data-title)
оформить псевдоэлемент как на картинке

я думаю его просто не видно, если вы не переводили блочную модель на border-box, то такой здоровый паддинг вполне вывалился за экран и организовал полосу прокрутки

родителю
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

или родителю
display: flex;
ссылке
margin: auto;

Кнопке открывания дал класс modal-open/
Проблема установки фокуса в том, что фокус идет на кнопку открытия модалки, возможно кто предложит что лучше

document.addEventListener('DOMContentLoaded', function() {
  let $btn = document.querySelector('.modal-open');
  let $input = document.querySelector('#search_query');
  $btn.addEventListener('click', function() {
    setTimeout(function(){
      $input.focus();
    }, 100);
  });
});

<div class="main">
  <div>
    <?php $query = new WP_Query('cat=8'); ?>

    <?php if ( $query->have_posts() ) : ?>

      <?php while ( $query->have_posts() ) : $query->the_post(); ?>

      <div class="panel">
        <div class="panel-heading">
          <a href="#1"><i class="fa fa-trophy"></i><?php the_title() ?></a>
        </div>
        <div class="panel-collapse">
          <?php the_excerpt() ?>
          <div class="button"><a href="<?php the_permalink() ?>">Read more</a></div>
        </div>
      </div>

      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>

    <?php endif; ?>

  </div>
</div>

https://drive.google.com/file/d/1VMyZ_DCGH3aqCheZb...

Как на меня очень много кода в сети написано именно в контексте лайоута на флоатах. Далеко ходить не нужно, woocommerce все ещё на флоатах.
Понимать как верстать на флоатах нужно например для поддержки легаси сайтов

Используя css анимации и активный слайд
Допустим есть такой слайдер, он имеет hero-title и hero-list

@keyframes fadeInUpSD {
    0% {
        opacity: 0;
        transform: translate3d(0,15%,0)
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.hero-slider .slick-active .hero-title.ajat-animated {
    animation: fadeInUpSD 1s both 1s
}

.hero-slider .slick-active .hero-list.ajat-animated {
    animation: fadeInUpSD 1s both 1.5s
}

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

Если вам достаточно накрыть картинку прозрачным оверлеем, то можно завернуть каждую картинку в обертку и ей приделать оверлей через псевдоэлемент

<div class="img-wrapper">
	<img src="img/category/cat3.jpg" alt="">
</div>

.img-wrapper {
	position: relative;
}
.img-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

не нужно задавать инлайновые стили через js. все эти стили можно отнаследовать от класса .sticky, а перебить инлайновые стили с помощью просто цсс сложнее.
Например

.page-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 20px 0;
	background-color: #292929;
	transition: padding .25s;
	z-index: 100;
}

.page-header.scroll {
	padding: 10px 0;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,.05);
}

.page-header.scroll .main-menu a {
	color: #292929;
}

.page-header.scroll .main-menu a:hover {
	color: #06bbc7;
}

.main-menu a {
	color: #e5e5e5;
}

.main-menu a:hover {
	color: #06bbc7;
}