ソースを参照

fixing mobile responsiveness

Medowar 1 ヶ月 前
コミット
76871458c4
3 ファイル変更101 行追加5 行削除
  1. 94 0
      assets/css/style.css
  2. 6 4
      cart.php
  3. 1 1
      checkout.php

+ 94 - 0
assets/css/style.css

@@ -480,6 +480,37 @@ footer {
     margin-top: 2rem;
 }
 
+/* Checkout two-column layout (responsive via media query) */
+.checkout-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+/* Cart total / actions block */
+.cart-actions {
+    text-align: right;
+    margin: 2rem 0;
+}
+
+.cart-actions .cart-total {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+.cart-actions .cart-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.cart-actions .cart-buttons .btn {
+    margin-left: 0;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
     .header-inner {
@@ -517,6 +548,46 @@ footer {
         margin-top: 1rem;
     }
     
+    .cart-actions {
+        text-align: left;
+    }
+    
+    .cart-actions .cart-buttons {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .cart-actions .cart-buttons .btn {
+        margin-left: 0;
+    }
+    
+    .checkout-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    
+    .modal-content {
+        margin: 1rem;
+        max-height: calc(100vh - 2rem);
+    }
+    
+    .admin-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+    
+    .admin-header > div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    
+    .admin-header .btn {
+        flex: 1 1 auto;
+        min-width: 140px;
+    }
+    
     table {
         font-size: 0.9rem;
     }
@@ -531,6 +602,29 @@ footer {
     }
 }
 
+@media (max-width: 480px) {
+    .container {
+        padding: 0 12px;
+    }
+    
+    main {
+        padding: 1rem 0;
+    }
+    
+    .brand-title {
+        font-size: 1.1rem;
+    }
+    
+    .brand-subtitle {
+        font-size: 0.8rem;
+    }
+    
+    .products-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+}
+
 /* Utility Classes */
 .text-center {
     text-align: center;

+ 6 - 4
cart.php

@@ -103,12 +103,14 @@ include __DIR__ . '/includes/header.php';
             </div>
         <?php endforeach; ?>
         
-        <div style="text-align: right; margin: 2rem 0;">
-            <div style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">
+        <div class="cart-actions">
+            <div class="cart-total">
                 Gesamtsumme: <?php echo formatPrice($total); ?>
             </div>
-            <button type="submit" name="update_cart" class="btn btn-secondary">Warenkorb aktualisieren</button>
-            <a href="checkout.php" class="btn" style="margin-left: 1rem;">Zur Reservierung</a>
+            <div class="cart-buttons">
+                <button type="submit" name="update_cart" class="btn btn-secondary">Warenkorb aktualisieren</button>
+                <a href="checkout.php" class="btn">Zur Reservierung</a>
+            </div>
         </div>
     </form>
 <?php endif; ?>

+ 1 - 1
checkout.php

@@ -122,7 +122,7 @@ include __DIR__ . '/includes/header.php';
     </div>
 <?php endif; ?>
 
-<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem;">
+<div class="checkout-grid">
     <div>
         <h3>Ihre Bestellung</h3>