-1

Developing a shopping cart using Django with Bootstrap. Products are displayed in 1 column. This works in mobile, but not on desktop or ipad. I need the products side by side as seen on most shopping/ecommerce websites.

I changed the grid-template-columns setting using various info found on the internet but no luck. grid-gap works so i know that css is being seen.

 <div class="container">
 {% for products in products %}

 <div class="row"> {% if products.name %}
 <div class="products_all">

<div class="col-3 col-md-3 col-lg-2 products_all">
<div class="card" style="width: 18rem;">
   <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">{{ products.name }}</h5>
                <p class="card-text">{{ products.description }}</p>
                         <a href="#" class="btn btn-primary">Go somewhere</a>
 </div> <!-- card -->
</div> <!-- card body -->
{% endif %}
{% endfor %}
</div> <!--   </div> col end div --->
</div> <!--- products_all ---->
</div> <!-- row end div --->
</div> <!-- container end div --->



.products_all {
/***
padding-top: 2.2550rem;
***/
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;

 }

 .card {

background: white;
text-decoration: none;
color: #444;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

Column stays to the left and does not change to more than one column.

https://d.pr/i/qBkSip

dustinos3
  • 934
  • 3
  • 17
  • 27
Jai Venkat
  • 1
  • 1

1 Answers1

0

You generate a row for each product:

<div class="container">
{% for products in products %}    
    <div class="row"> {% if products.name %}

How can they be side by side?


Just taking out <div class="row"> outside of the loop should fix the problem:

<div class="container">
    <div class="row products">
    {% for product in products %}   
    {% if product.name %}
        <div class="col-3 col-lg-2 product">    
            <div class="card"> ... </div>
David Liang
  • 20,385
  • 6
  • 44
  • 70