making websight have more of a responsive design by using % instead of px and...

making websight have more of a responsive design by using % instead of px and changed how buttons look

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;
 }

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 %}