changing font sizes to using vw so changes when screen size changes and...

changing font sizes to using vw so changes when screen size changes and changed the footer logo and some text sizes

shop/static/styles.css

@@ -112,14 +112,18 @@ a:link {
     border: 2px solid black;
 }
 
-.item_home_name {
-    font-size: 200%;
+.item_shopping_name {
+    font-size: 2vw;
     color: black;
     font-family: Monaco, sans-serif;
 }
 
-.item_home_name:hover {
-    font-size: 230%;
+.shopping_item_text{
+    font-size: 1.4vw;
+}
+
+.item_shopping_name:hover {
+    font-size: 2.1vw;
 }
 
 .navbar {
@@ -331,7 +335,7 @@ li {
     margin-top: 50px;
 }
 
-.home_right_text {
+.shopping_right_text {
     font-size: 150%;
 }
 
@@ -399,11 +403,16 @@ li {
     background-color: #202020;
 }
 
-.footer_logo {
+.footer_logo_div {
     margin-left: 50px;
     margin-top: 10px;
 }
 
+.footer_logo_left {
+    height: 100px;
+    max-width: 30%
+}
+
 .footer_contact {
     color: white;
     text-align: center;
@@ -434,7 +443,7 @@ li {
 
 .start_shopping_text {
     color: white;
-    font-size: 400%;
+    font-size: 4vw;
     font-family: Andale Mono, monospace;
 }
 

shop/templates/cart.html

@@ -60,8 +60,8 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo">
-        <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+    <div class = "footer_logo_div">
+        <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
         <p>Contact us:</p>

shop/templates/home.html

@@ -6,11 +6,11 @@
 <div id="content-wrap">
 
     <div class = "home_right">
-        <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:60px;">
+        <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:4vw;">
     </div>
 
     <div class = "home_left">
-        <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:60px;">
+        <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:4vw;">
     </div>
 
     <h1 class = "home_title" >Rocky Alpine Cycles</h1>
@@ -33,8 +33,8 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo">
-        <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+    <div class = "footer_logo_div">
+        <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
         <p>Contact us:</p>

shop/templates/shopping.html

@@ -7,11 +7,11 @@
 <div id="content-wrap">
 
     <div class = "shopping_side">
-        <p class = "home_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p>
+        <p class = "shopping_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p>
         <form action="" method="POST">
             <div>
                 <form method="POST">
-                  <div class = "home_right_text">
+                  <div class = "shopping_right_text">
                     {{ order_by_form.csrf_token }}
                     <p>
                       {{ order_by_form.order.label }} {{ order_by_form.order(class = "field_order_by") }} {{ order_by_form.submit(class = "field_order_by") }}
@@ -20,7 +20,7 @@
                 </form>
 
                 <form method="POST">
-                  <div class = "home_right_text">
+                  <div class = "shopping_right_text">
                     {{ type_form.csrf_token }}
                     <p>
                       {{ type_form.type.label }} {{ type_form.type(class = "field_order_by") }} {{ type_form.submit1(class = "field_order_by") }}
@@ -68,9 +68,9 @@
         <div class = "item_shopping_block">
             <a href="/item?id={{item.product_id}}">
                 <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>
+            <p><a class = "item_shopping_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
+            <p class = "shopping_item_text">price: £{{ item.product_price }}</p>
+            <p class = "shopping_item_text">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 }}>
@@ -92,8 +92,8 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo">
-        <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+    <div class = "footer_logo_div">
+        <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
         <p>Contact us:</p>

shop/templates/wishlist.html

@@ -47,8 +47,8 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo">
-        <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+    <div class = "footer_logo_div">
+        <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
         <p>Contact us:</p>