From e9ed141b5019e12848e4cc3543ff36601810fc29 Mon Sep 17 00:00:00 2001
From: Nathan Chapman <contact@nathanjchapman.com>
Date: Mon, 23 Jan 2023 18:38:51 -0700
Subject: [PATCH] Fix mobile display of products on subscription form

---
 static/styles/main.css                               | 10 +++++++++-
 .../templates/storefront/subscription/form.html      | 12 +++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/static/styles/main.css b/static/styles/main.css
index d8d8b12..ad56e52 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -779,13 +779,21 @@ article + article {
 }
 
 .subscription-coffee div {
-    text-align: center;
+    min-width: 12rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
 }
 
 .subscription-coffee img {
     max-height: 300px;
 }
 
+.subscription-coffee input[type=number] {
+    width: 100%;
+}
+
 .subscription-products {
     display: flex;
     gap: 2rem;
diff --git a/storefront/templates/storefront/subscription/form.html b/storefront/templates/storefront/subscription/form.html
index 17b1e18..0ac2452 100644
--- a/storefront/templates/storefront/subscription/form.html
+++ b/storefront/templates/storefront/subscription/form.html
@@ -18,13 +18,11 @@
             <section class="subscription-coffee">
             {% for product in product_list %}
                 <div>
-                    <label><strong>{{ product }}</strong>
-                        <figure class="product__figure">
-                            <img class="product__image" src="{{ product.get_first_img.image.url }}">
-                        </figure>
-                    </label>
-                    <label>Quantity:</label>
-                    <input type="number" min="0" max="20" data-id="{{ product.pk }}" name="product_{{ product.name }}">
+                    <figure class="product__figure">
+                        <img class="product__image" src="{{ product.get_first_img.image.url }}">
+                    </figure>
+                    <strong>{{ product }}</strong>
+                    <input type="number" min="0" max="20" pattern="[0-9]*" data-id="{{ product.pk }}" name="product_{{ product.name }}" placeholder="Quantity">
                 </div>
             {% endfor %}
             </section>