From 6376e595342a50ce45f29a5ed23dab6a815e5716 Mon Sep 17 00:00:00 2001 From: Michael Drury <mpdrury15@gmail.com> Date: Fri, 28 Apr 2023 11:40:06 +0100 Subject: [PATCH] making websight have more of a responsive design by using % instead of px and changed how buttons look --- shop/static/styles.css | 35 ++++++++++++++++++++++++----------- shop/templates/shopping.html | 10 +++++----- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/shop/static/styles.css b/shop/static/styles.css index 42d2805..4b5628e 100644 --- a/shop/static/styles.css +++ b/shop/static/styles.css @@ -19,18 +19,18 @@ a:link { text-align: center; } -.item_home_img { +.item_shopping_img { height: 90%; float: right; padding: 2%; } -.home_side { +.shopping_side { float: right; clear: right; padding: 20px; text-align: center; - height: 100%; + width: 20%; } .home_left { @@ -61,10 +61,10 @@ a:link { .shopping_title { font-size: 450%; border: thin; - margin-left: 20px; + margin-left: 2%; font-family: Andale Mono, monospace; border-bottom: 2px solid grey; - width: 1150px; + width: 75%; } .home_title { @@ -98,10 +98,11 @@ a:link { padding-left: 20px; } -.item_home_block { +.item_shopping_block { border: 2px solid grey; - width: 900px; - margin: 20px; + width: 60%; + margin-left: 2%; + margin-bottom: 20px; padding: 10px; height: 250px } @@ -196,7 +197,7 @@ li { transform: scale(1.1); } -.item_home_img:hover { +.item_shopping_img:hover { transform: scale(1.1); } @@ -351,7 +352,7 @@ li { } .sponsor_image { - width: 280px; + width: 100%; } .remove_form { @@ -459,11 +460,23 @@ li { } .ad_photo { - width: 250px; + width: 80%; padding: 0px; margin: 0px; } +.add_to_button { + color: black; + border: 2px solid grey; + background-color: lightgrey; + border-radius: 5px; +} + +.add_to_button:hover { + color: #D49B30; + background-color: lightgrey; +} + .ad_box { border: 2px solid grey; } diff --git a/shop/templates/shopping.html b/shop/templates/shopping.html index 0317f6e..f145723 100644 --- a/shop/templates/shopping.html +++ b/shop/templates/shopping.html @@ -6,7 +6,7 @@ <div id="content-wrap"> - <div class = "home_side"> + <div class = "shopping_side"> <p class = "home_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p> <form action="" method="POST"> <div> @@ -65,20 +65,20 @@ {% for item in product_table %} - <div class = "item_home_block"> + <div class = "item_shopping_block"> <a href="/item?id={{item.product_id}}"> - <img class = "item_home_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a> + <img class = "item_shopping_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a> <p><a class = "item_home_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p> <p>price: £{{ item.product_price }}</p> <p>product type: {{ item.product_type }}</p> {% if current_user.is_authenticated %} <form method = "post"> <input type = "hidden" name = "item_id_cart" value = {{ item.product_id }}> - <input type = "submit" value = "add to cart"> + <input class = "add_to_button" type = "submit" value = "add to cart"> </form> <form method = "post" style = "padding-top: 10px"> <input type = "hidden" name = "item_id_wishlist" value = {{ item.product_id }}> - <input type = "submit" value = "add to wishlist"> + <input class = "add_to_button" type = "submit" value = "add to wishlist"> </form> {% endif %} {% if not current_user.is_authenticated %} -- GitLab