fantastikgodd

https://jsfiddle.net/908f2t5p/

Возможно вы это искали.

Вроде так :


Перезапустить нажмите на :

box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.1);

У вас бордер добавляется к кнопке, вот и скачет

как поправить?

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

Например вы можете сделать скрытый input и на него повесить datepicker, а при клике на абзац показывать его через $( ".selector" ).datepicker( "show" );

Т.е как то так:

https://css-tricks.com/snippets/css/fluid-typography/
https://mattclaffey.medium.com/responsive-fonts-us...

const openSelector = '.block__item';
const closeSelector = '.close';
const itemSelector = '.popup';
const activeClass = 'popup--active';


// делегирование, общий обработчик клика - для открытия и закрытия сразу,
// назначается один раз для всех элементов;
// связь кнопок открытия попапов с попапами через data-атрибут
document.addEventListener('click', ({ target: t }) => {
  let item = t.closest(closeSelector)?.closest(itemSelector);
  if (!item) {
    const open = t.closest(openSelector);
    if (open) {
      item = document.querySelector(`${itemSelector}.${open.dataset.popup}`);
    }
  }

  item?.classList.toggle(activeClass);
});

// или, отдельные обработчики клика для открытия и закрытия,
// назначаются каждому элементу индивидуально;
// связь кнопок открытия попапов с попапами через индексы
const open = [...document.querySelectorAll(openSelector)];
const close = document.querySelectorAll(closeSelector);
const items = document.querySelectorAll(itemSelector);

const onOpenClick = e => items[open.indexOf(e.currentTarget)].classList.add(activeClass);
open.forEach(n => n.addEventListener('click', onOpenClick));

const onCloseClick = e => e.currentTarget.closest(itemSelector).classList.remove(activeClass);
close.forEach(n => n.addEventListener('click', onCloseClick));

Вынести их за пределы слайдов:

#s2 {
overflow-y: scroll;
}

https://jsfiddle.net/StiflerProger/n6wzh07y/102/

const toDate = (str) => {
  const [date, month, year] = str.split('.');
  return Date.parse([year, month, date].join('-'));
}

const sorted = arr.sort((a, b) => toDate(a.date) - toDate(b.date))

const sorted = (arr, key) => arr
  .map(n => [ key(n), n ])
  .sort(([a], [b]) => a < b ? -1 : +(a > b))
  .map(n => n[1]);

const sortedArr = sorted(
  arr,
  n => new Date(n.date.replace(/(\d+)\.(\d+)\.(\d+)/, '$3-$2-$1'))
);

// или

const sortedArr = sorted(
  arr,
  n => n.date.split('.').reverse().map(m => m.padStart(2, 0)).join('')
);

https://jsfiddle.net/yarkov_aleksei/95hms1jb/

Функция the_date() может выводить дату большим количеством способов.
Прочитайте данную статью.

RTFM

Дата публикации группы постов означает, что для постов опубликованных в одни день, дата выводиться только для первого поста. Т.е., для каждого следующего поста в цикле, функция проверяет в какой день опубликован этот пост, и если дата текущего поста и предыдущего совпадают, то для этого поста дата не выводиться.

Чтобы выводить дату для всех постов (с версии 3.0) нужно использовать функции: the_time() или get_the_date().

scrollIntoView
ELEMENT.scrollIntoView({ behavior: 'smooth' });

<div style="background-image: url(<?php echo get_template_directory_uri() ?>/img/pattern.svg)"></div>