From ddeaa23cb5acbfb82401ca98839754d29c3420b3 Mon Sep 17 00:00:00 2001
From: zacc806 <zakirzhangozin@gmail.com>
Date: Wed, 24 Jan 2024 18:55:52 +0600
Subject: [PATCH] added grid, fixed footer

---
 main/static/deps/css/my_footer_css.css |  2 --
 main/templates/main/index.html         | 26 ++++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/main/static/deps/css/my_footer_css.css b/main/static/deps/css/my_footer_css.css
index dd65a2f..827db98 100644
--- a/main/static/deps/css/my_footer_css.css
+++ b/main/static/deps/css/my_footer_css.css
@@ -1,6 +1,4 @@
 footer {
-    position: fixed;
-    bottom: 0;
     width: 100%;
     background-color: #8100bb;
     padding: 10px 0;
diff --git a/main/templates/main/index.html b/main/templates/main/index.html
index 8445494..d347a2b 100644
--- a/main/templates/main/index.html
+++ b/main/templates/main/index.html
@@ -63,21 +63,23 @@
         </div>
         <div class="row"> <!-- Add this line -->
             {% for product in products %}
-                <div class="col-6 col-md-4 p-4">
-                    <div class="card border-primary rounded custom-shadow h-100">
-                        <img src="{{ product.image.url }}" class="card-img-top img-fluid" alt={{ product.name }}>
-                        <div class="card-body">
-                            <a href="{{ product.get_absolute_url }}">
-                                <p class="card-title">{{ product.name }}</p>
-                            </a>
-                            <p class="card-text text-truncate">{{ product.description }}</p>
-                            <div class="d-flex justify-content-between">
-                                <p><strong>{{ product.price }} $</strong></p>
-                            </div>
+            <div class="col-12 col-md-6 col-lg-4 p-4">
+                <div class="card border-primary rounded custom-shadow">
+                    <div class="aspect-ratio overflow-hidden" style="position: relative; padding-top: 100%;">
+                        <img src="{{ product.image.url }}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt={{ product.name }}>
+                    </div>
+                    <div class="card-body">
+                        <a href="{{ product.get_absolute_url }}">
+                            <p class="card-title">{{ product.name }}</p>
+                        </a>
+                        <p class="card-text text-truncate">{{ product.description }}</p>
+                        <div class="d-flex justify-content-between">
+                            <p><strong>{{ product.price }} $</strong></p>
                         </div>
                     </div>
                 </div>
-            {% endfor %}
+            </div>
+        {% endfor %}
         </div> <!-- Add this line -->
     </div>
     <section>