From d099944fe13ac4467c662d6b7363c9e576e46a86 Mon Sep 17 00:00:00 2001
From: Michael Drury <mpdrury15@gmail.com>
Date: Wed, 10 May 2023 12:54:44 +0100
Subject: [PATCH] made navbar change based on size of screen

---
 shop/static/styles.css        | 81 +++++++++++++++++++++++++++++++++--
 shop/templates/user_page.html |  4 +-
 2 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/shop/static/styles.css b/shop/static/styles.css
index c0e27e0..40b02be 100644
--- a/shop/static/styles.css
+++ b/shop/static/styles.css
@@ -192,11 +192,83 @@ li {
   display: block;
   font-family: Andale Mono, monospace;
   color: grey;
-  font-size: 150%;
+  font-size: 180%;
   text-align: center;
   padding: 10% 10%;
 }
 
+@media only screen and (max-width: 1300px) {
+
+    .navbar_box_home {
+        width: 150px;
+        height: 60px;
+    }
+
+    .navbar_box {
+        width: 150px;
+        height: 60px;
+    }
+
+    .navbar_item {
+        font-size: 160%;
+    }
+
+}
+
+@media only screen and (max-width: 950px) {
+
+    .navbar_box_home {
+        width: 130px;
+        height: 50px;
+    }
+
+    .navbar_box {
+        width: 130px;
+        height: 50px;
+    }
+
+    .navbar_item {
+        font-size: 130%;
+    }
+
+}
+
+@media only screen and (max-width: 820px) {
+
+    .navbar_box_home {
+        width: 100px;
+        height: 40px;
+    }
+
+    .navbar_box {
+        width: 100px;
+        height: 40px;
+    }
+
+    .navbar_item {
+        font-size: 100%;
+    }
+
+}
+
+@media only screen and (max-width: 650px) {
+
+    .navbar_box_home {
+        width: 78px;
+        height: 30px;
+    }
+
+    .navbar_box {
+        width: 78px;
+        height: 30px;
+    }
+
+    .navbar_item {
+        font-size: 78%;
+    }
+
+}
+
 .cart_box {
     border: 2px solid grey;
     width: 45%;
@@ -344,6 +416,7 @@ li {
 
 .input_field {
     height: 19px;
+    width: 30%;
 }
 
 .field_order_by {
@@ -595,13 +668,15 @@ li {
 .new_mobile {
     float: right;
     clear: right;
-    margin-right: 10%
+    margin-right: 40%
+    padding: 0px;
 }
 
 .new_email {
     float: left;
     clear: left;
     margin-left: 10%
+    padding: 0px;
 }
 
 .user_exists {
@@ -609,4 +684,4 @@ li {
     color: red;
     font-family: Andale Mono, monospace;
     font-size: 2vw;
-}
\ No newline at end of file
+}
diff --git a/shop/templates/user_page.html b/shop/templates/user_page.html
index 9cfc62d..8f9394a 100644
--- a/shop/templates/user_page.html
+++ b/shop/templates/user_page.html
@@ -19,7 +19,7 @@
                     Want to change your email?
                 </p>
                 <p class="login_field">
-                    {{ email_form.new_email.label }} {{ email_form.new_email(class = "input_field") }} {{ email_form.submit1(class = "input_field") }}
+                    {{ email_form.new_email.label }} {{ email_form.new_email(class = "input_field") }} {{ email_form.submit1(class = "add_to_button") }}
                 </p>
             </div>
         </form>
@@ -33,7 +33,7 @@
                     Want to change your mobile?
                 </p>
                 <p class="login_field">
-                    {{ mobile_form.new_mobile.label }} {{ mobile_form.new_mobile(class = "input_field") }} {{ mobile_form.submit2(class = "input_field") }}
+                    {{ mobile_form.new_mobile.label }} {{ mobile_form.new_mobile(class = "input_field") }} {{ mobile_form.submit2(class = "add_to_button") }}
 
                 </p>
             </div>
-- 
GitLab