made footer better making it adjust with screen size

shop/static/styles.css

@@ -403,31 +403,39 @@ li {
     background-color: #202020;
 }
 
-.footer_logo_div {
-    margin-left: 50px;
+.footer_logo_left_div {
+    width: 30%;
+    margin-left: 2%;
     margin-top: 10px;
+    clear: left;
+}
+
+.footer_logo_right_div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding-left: 20px;
 }
 
 .footer_logo_left {
     height: 100px;
-    max-width: 30%
+    max-width: 100%;
+}
+
+.footer_logo_right {
+    height: 100px;
+    float: right;
 }
 
 .footer_contact {
     color: white;
     text-align: center;
-    width: 20%;
+    width: 30%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
-.footer_bike {
-    position: absolute;
-    top: 0%;
-    left: 50%;
-    transform: translate(380%, 0%);
-}
 
 .home_block {
     padding-top: 10px;

shop/templates/cart.html

@@ -60,7 +60,7 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo_div">
+    <div class = "footer_logo_left_div">
         <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
@@ -68,8 +68,8 @@
         <p>e-mail: mpdrury15@gmail.com</p>
         <p>telephone: 07874810762</p>
     </div>
-    <div class = "footer_bike">
-        <img style = "height: 120px" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
+    <div class = "footer_logo_right_div">
+        <img class = "footer_logo_right" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
     </div>
 </footer>
 

shop/templates/home.html

@@ -33,7 +33,7 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo_div">
+    <div class = "footer_logo_left_div">
         <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
@@ -41,8 +41,8 @@
         <p>e-mail: mpdrury15@gmail.com</p>
         <p>telephone: 07874810762</p>
     </div>
-    <div class = "footer_bike">
-        <img style = "height: 120px" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
+    <div class = "footer_logo_right_div">
+        <img class = "footer_logo_right" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
     </div>
 </footer>
 

shop/templates/shopping.html

@@ -92,7 +92,7 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo_div">
+    <div class = "footer_logo_left_div">
         <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
@@ -100,8 +100,8 @@
         <p>e-mail: mpdrury15@gmail.com</p>
         <p>telephone: 07874810762</p>
     </div>
-    <div class = "footer_bike">
-        <img style = "height: 120px" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
+    <div class = "footer_logo_right_div">
+        <img class = "footer_logo_right" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
     </div>
 </footer>
 

shop/templates/wishlist.html

@@ -47,7 +47,7 @@
 
 <!--repeated footer in page as dont want every page to have it-->
 <footer id="footer">
-    <div class = "footer_logo_div">
+    <div class = "footer_logo_left_div">
         <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
     </div>
     <div class = "footer_contact">
@@ -55,8 +55,8 @@
         <p>e-mail: mpdrury15@gmail.com</p>
         <p>telephone: 07874810762</p>
     </div>
-    <div class = "footer_bike">
-        <img style = "height: 120px" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
+    <div class = "footer_logo_right_div">
+        <img class = "footer_logo_right" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
     </div>
 </footer>
 {% endblock %}