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