From cc8664928773e2e843f5e9a5bc1327adca83bde3 Mon Sep 17 00:00:00 2001
From: Michael Drury <mpdrury15@gmail.com>
Date: Fri, 28 Apr 2023 19:07:25 +0100
Subject: [PATCH] made footer better making it adjust with screen size
---
instance/app.db | Bin 20480 -> 20480 bytes
shop/static/styles.css | 28 ++++++++++++++++++----------
shop/templates/cart.html | 6 +++---
shop/templates/home.html | 6 +++---
shop/templates/shopping.html | 6 +++---
shop/templates/wishlist.html | 6 +++---
6 files changed, 30 insertions(+), 22 deletions(-)
diff --git a/instance/app.db b/instance/app.db
index f829db8a75fc406e0239b6b1828275560567c0a5..1775a1cbcfeb791982093819731bf24ba61b79be 100644
GIT binary patch
delta 74
zcmZozz}T>Wae_3X+(a2?M!Ag%3;B5&7#NuO7BTR5@r&{;+AJs_!Y9bz#n2$#7%2;+
cD}Xew;ADNd{K<>tUa*ufvNLS%lP@v=0Kj4sYybcN
delta 81
zcmV-X0IvUlpaFoO0gxL38j&1B0UEJjp$`oYiU0!+CIAj54;2ogvk@Q|4iI_)2LKy^
nSs4v&X=7+%Wo(nL9u<>M9#aD`AUKnu9_a)C004HgjvsO`Lm?GU
diff --git a/shop/static/styles.css b/shop/static/styles.css
index c0b5b06..05c78b5 100644
--- a/shop/static/styles.css
+++ b/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;
diff --git a/shop/templates/cart.html b/shop/templates/cart.html
index a1bb631..d845789 100644
--- a/shop/templates/cart.html
+++ b/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>
diff --git a/shop/templates/home.html b/shop/templates/home.html
index e60b0e5..8e15874 100644
--- a/shop/templates/home.html
+++ b/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>
diff --git a/shop/templates/shopping.html b/shop/templates/shopping.html
index 3a53bf7..db25cea 100644
--- a/shop/templates/shopping.html
+++ b/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>
diff --git a/shop/templates/wishlist.html b/shop/templates/wishlist.html
index bf614eb..648ee37 100644
--- a/shop/templates/wishlist.html
+++ b/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 %}
--
GitLab