Карты HTMX с бесконечной прокруткой меняют форму после прокрутки

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

    <body>
    <div class="container">
        {% block content %}
        <div
        {% if products.has_next %}  
        hx-get="?page={{ products.next_page_number }}"
        hx-trigger="revealed"
        hx-swap="afterend"
        {% endif %}
        >
        {% include 'includes/cards.html' %}
        </div>
        {% include 'includes/sidebar.html' %}
        {% endblock content %}
    </div>
</body>

при прокрутке вниз карточки товаров немного сдвигаются вправо и уменьшается на мобильных устройствах вот так enter image description here и вот так: enter image description here

на это : enter image description here

Можете ли вы, ребята, помочь мне понять, что я делаю неправильно?

я также попробовал https://infinite-scroll.com/. он прекрасно работает.

Редактирование:

views.py

def shop(request):
anabanner = AnaBanner.objects.all()
gender = Gender.objects.all()
categories = Category.objects.all()
colors = Color.objects.all()
materials = Material.objects.all()
query = request.GET.get('query','')
products = Product.objects.all().order_by('-pk')
if query:
    products = products.filter(
        Q(name__icontains=query)|
        Q(sub_name__icontains=query)
    ).distinct()
paginator = Paginator(products, 8)

page = request.GET.get('page')

cards.html

    {% load static %}
    {% block content %}
    <body>
      {% for product in products %}

  <div class="product-card">
    <a href="{% url  'productpage' product.slug %}"><div class="main-images">
      <img  id="black" class="black active" loading="lazy" src="{{product.imageURL}}" alt="blue">
      
    </div></a>
    <div class="shoe-details">
    <span class="shoe_name">
        <a href="{% url  'productpage' product.slug %}"><p style="display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 16px;
    font-weight: 500;
    color: #161616;width: 100%;overflow: hidden;/* white-space: nowrap; */text-overflow: ellipsis;">{{product.name}}</p></a>
        </span>
    </div>
   
      <div class="price">
        <span class="price_num">{{product.price|floatformat:2}}TL</span>
      </div>
    </div>
     {% if product.stock > 0 %}
    <div class="button">
      <div class="button-layer"></div>
      <button name="ekle" 
      href ="#"
      hx-get="{% url 'add_to_cart' product.id %}"
      hx-target="#menu-cart-button"
      hx-swap="outerHTML" 
      class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
    </div>
    {% else %}
        <div class="button">
      <div class="button-layer"></div>
      <button name="ekle" 
      href ="#"
      hx-get="{% url 'add_to_cart' product.id %}"
      hx-target="#menu-cart-button"
      hx-swap="outerHTML" 
      class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
    </div>
     {% endif %}
  </div>

  {% endfor %}
</body>
{% endblock %}

cards.css (я пробовал удалить прокладки, но это не помогло) 

.product-card {
  display: inline-block;
  position: relative;
  left: 100px;
  top:150px;
  max-width: 355px;
  width: 100%;
  border-radius: 25px;
  padding: 20px 30px 30px 30px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 3;
  overflow: hidden;
}
Вернуться на верх