I'm Yoda

Возможно потому, что у вас стоит 144 DPI например. Поставьте 72 DPI. Обычно из-за этого не стыковка происходит.

Можете сделать свойство "Привязка к элементу", свойство возвращает ID элемента, т.к. у вас будет ID элемента (товара), то товар можно без проблем вывести внутри статьи.

Хороший вариант, т.к. товар можно будет спокойно добавить в админке, хоть 10 товаров.

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

Из бутсряпа только сетку использую, от 4 версии.

Я обновлял спустя 3 года (купил продление), обнова встала нормально!
Но предварительно сделал бэкап...

JSON.stringify(Ваш_JSON);

В карточке товара делаешь проверку есть ли этот товар в корзине (в result_modifier.php), а при добавлении в корзину, аяксом возвращаешь класс значка или как там у тебя.

Получается при добавлении выводится значок, при перезагрузке выводится значок.

Так попробуйте:

$('.color-gl').mouseenter(function(event) {
    $('.color-tah').fadeOut(300);
    $('.grey-tah').fadeIn(300);
    $('.color-dop').fadeOut(300);
    $('.grey-dop').fadeIn(300);
    $('.color-med').fadeOut(300);
    $('.grey-med').fadeIn(300);
}).mouseleave(function(event) {
    $('.color-tah').fadeIn(300);
    $('.grey-tah').fadeOut(300);
    $('.color-dop').fadeIn(300);
    $('.grey-dop').fadeOut(300);
    $('.color-med').fadeIn(300);
    $('.grey-med').fadeOut(300);
});

Делал подобное на старте. После подтверждения заказа (назовем так) в иб формируется элемент в котором записаны данные пользователя (почта, фио, телефон и т.д.) в детальное описание писал товары которые в заявке.

В лк покупатель видит все свои заказы. Элементы отфильтрованные по ИД юзера.

if (scrollTop > 0) {
    navbar.classList.add('fixed');
  } else {
    navbar.classList.remove('fixed');
  }

С jquery как то так.

var isLineHeight = 0;

$('div.line').each(function(){
     if ($(this).height() > isLineHeight ) { 
          isLineHeight = $(this).height(); 
     }
});

$('div.line').height(isLineHeight );

UPD

Для каждой новой строки которую надо подогнать по высоте лучше присвоить индекс, например line-1, line-2 и т.д.

У 4 версии для маленьких экранов по умолчанию классы col-1, col-2, col-auto не исключение. Классы col-sm-* начинают работать от ширины экрана 540px, если меньше то col-(1,2,3...12) и т.д. Так же col-* без префикса sm, md можно использовать если у вас блок на всех экранах будет одного размера. Например
<div class="col-12"></div>

В вашем случае.

<div class="row">
          <div class="col-auto">
                    <a href="#" class="button button_right">Скачать</a>
          </div>
          <div class="col-auto">
                    <a href="#" class="button">Подробности</a>
          </div>
</div>