Baseflask4

Paused

flpolprojects commited on Feb 19, 2025

Commit

b5185ab

verified ·

1 Parent(s): e35954f

Update app.py

Files changed (1) hide show

app.py CHANGED Viewed

@@ -98,10 +98,10 @@ def catalog():
     # Pagination setup
     page = request.args.get('page', 1, type=int)
-    per_page = 10  # 10 products per column
     # Calculate start and end indices for the current page
-    start = (page - 1) * per_page * 3  # 3 columns per row
     end = start + per_page * 3
     # Slice the products list for the current page
@@ -121,8 +121,9 @@ def catalog():
         <style>
             body {
                 font-family: Arial, sans-serif;
-                margin: 20px;
                 background-color: #f9f9f9;
             }
             h1 {
                 color: #333;
@@ -131,11 +132,11 @@ def catalog():
             .container {
                 display: flex;
                 flex-wrap: wrap;
-                justify-content: space-between;
                 gap: 20px;
             }
             .product {
-                flex: 1 1 calc(30% - 20px); /* Three columns */
                 background-color: #fff;
                 border: 1px solid #ddd;
                 padding: 15px;
@@ -170,6 +171,13 @@ def catalog():
             .pagination a:hover:not(.active) {
                 background-color: #ddd;
             }
         </style>
     </head>
     <body>

     # Pagination setup
     page = request.args.get('page', 1, type=int)
+    per_page = 6  # Adjusted for mobile view
     # Calculate start and end indices for the current page
+    start = (page - 1) * per_page * 3 # 3 columns for bigger screens
     end = start + per_page * 3
     # Slice the products list for the current page
         <style>
             body {
                 font-family: Arial, sans-serif;
+                margin: 0; /* Reset default margin */
                 background-color: #f9f9f9;
+                padding: 20px;
             }
             h1 {
                 color: #333;
             .container {
                 display: flex;
                 flex-wrap: wrap;
+                justify-content: space-around;
                 gap: 20px;
             }
             .product {
+                flex: 1 1 calc(100% - 20px); /* Full width on mobile */
                 background-color: #fff;
                 border: 1px solid #ddd;
                 padding: 15px;
             .pagination a:hover:not(.active) {
                 background-color: #ddd;
             }
+            /* Media query for larger screens */
+            @media (min-width: 768px) {
+                .product {
+                    flex: 1 1 calc(30% - 20px); /* Three columns on larger screens */
+                }
+            }
         </style>
     </head>
     <body>