From 65e8f13bc62515e930ca513f7f309b9b8926dabb Mon Sep 17 00:00:00 2001 From: sarthakjalan05 Date: Sun, 6 Oct 2024 16:58:55 +0530 Subject: [PATCH 1/3] Update footer.css --- cardie/static/main/footer.css | 65 ++++++++++------------------------- 1 file changed, 19 insertions(+), 46 deletions(-) diff --git a/cardie/static/main/footer.css b/cardie/static/main/footer.css index 94d8b3a..7853f6d 100644 --- a/cardie/static/main/footer.css +++ b/cardie/static/main/footer.css @@ -1,12 +1,9 @@ - @media (min-width: 1000px) { /* Large screens */ - .footer { position: fixed; bottom: 20px; left: 20px; - display: flex; flex-direction: column; z-index: 9; @@ -19,17 +16,16 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 50px; - display: flex; align-items: center; justify-content: center; } - + .footer_main_button_image { width: clamp(4vh, 40px, 4vw); height: auto; } - + .footer_main_button_icon { color: white; font-size: clamp(3vh, 30px, 3vw); @@ -38,21 +34,18 @@ .footer_main_contents { display: flex; flex-direction: row; - background-color: var(--default-glass-background); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(0.5vh, 5px, 0.5vw); margin-left: clamp(1vh, 10px, 1vw); - height: fit-content; } - + .footer_main_contents_link { font-family: var(--default-font-family); - font-size: clamp(1.4vh, 14px, 1.4vwS); + font-size: clamp(1.4vh, 14px, 1.4vw); color: white; opacity: 0.7; text-decoration: none; @@ -67,7 +60,7 @@ align-items: center; margin-bottom: clamp(1vh, 10px, 1vw); } - + .footer_warning_button { width: clamp(6vh, 60px, 6vw); height: clamp(6vh, 60px, 6vw); @@ -75,56 +68,47 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: clamp(5vh, 50px, 5vw); - display: flex; align-items: center; justify-content: center; } - + .footer_warning_contents { display: flex; flex-direction: column; - background-color: rgba(178, 145, 60, 0.4); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(1vh, 10px, 1vw); margin-left: clamp(1vh, 10px, 1vw); - height: fit-content; } - + .footer_warning_contents_title { color: white; font-family: var(--default-font-family); opacity: 0.7; font-weight: 600; font-size: clamp(1.4vh, 14px, 1.4vw); - margin: 0px; } - + .footer_warning_contents_text { color: white; font-family: var(--default-font-family); opacity: 0.7; - font-size: clamp(1.2vh, 12pv, 1.2vw); - + font-size: clamp(1.2vh, 12px, 1.2vw); margin: 0px; } - } @media (max-width: 1000px) { /* Small Screens */ - .footer { - position: fixed; + position: sticky; bottom: 10px; left: 10px; - display: flex; flex-direction: column; z-index: 9; @@ -137,17 +121,16 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 50px; - display: flex; align-items: center; justify-content: center; } - + .footer_main_button_image { width: clamp(4vh, 40px, 4vw); height: auto; } - + .footer_main_button_icon { color: white; font-size: clamp(3vh, 30px, 3vw); @@ -156,21 +139,18 @@ .footer_main_contents { display: flex; flex-direction: row; - background-color: var(--default-glass-background); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(0.2vh, 2px, 0.2vw); margin-left: clamp(0.5vh, 5px, 0.5vw); - height: fit-content; } - + .footer_main_contents_link { font-family: var(--default-font-family); - font-size: clamp(1.2vh, 12px, 1.2vwS); + font-size: clamp(1.2vh, 12px, 1.2vw); color: white; opacity: 0.7; text-decoration: none; @@ -185,7 +165,7 @@ align-items: center; margin-bottom: clamp(1vh, 10px, 1vw); } - + .footer_warning_button { width: clamp(5vh, 50px, 5vw); height: clamp(5vh, 50px, 5vw); @@ -193,46 +173,39 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 50px; - display: flex; align-items: center; justify-content: center; } - + .footer_warning_contents { display: flex; flex-direction: column; - background-color: rgba(178, 145, 60, 0.4); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(0.2vh, 2px, 0.2vw); margin-left: clamp(0.5vh, 5px, 0.5vw); - height: fit-content; } - + .footer_warning_contents_title { color: white; font-family: var(--default-font-family); opacity: 0.7; font-weight: 600; font-size: 14px; - margin: 0px; } - + .footer_warning_contents_text { color: white; font-family: var(--default-font-family); opacity: 0.7; font-size: 12px; - margin: 0px; } - } .footer_main { @@ -259,4 +232,4 @@ .footer_warning_contents_text > a { color: white; font-weight: 500; -} \ No newline at end of file +} From d7707959a9545778d1dce9d466a055513aac8b7d Mon Sep 17 00:00:00 2001 From: sarthakjalan05 Date: Mon, 7 Oct 2024 11:02:53 +0530 Subject: [PATCH 2/3] changed home and authentication page mobile view footer issue fixed --- cardie/static/main/authentication.css | 31 ++++++++++++++++++++++++++- cardie/static/main/home.css | 31 ++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 2 deletions(-) diff --git a/cardie/static/main/authentication.css b/cardie/static/main/authentication.css index 165cb7d..01be963 100644 --- a/cardie/static/main/authentication.css +++ b/cardie/static/main/authentication.css @@ -84,4 +84,33 @@ html { #authentication_privacypolicy:hover { scale: 1.1; opacity: 1; -} \ No newline at end of file +} + +/* Footer styles */ +#footer { + background-color: var(--default-glass-background); + border-top: var(--default-glass-border); + text-align: center; + padding: clamp(1vh, 10px, 1vw); + width: 100%; +} + +@media (max-width: 1000px) { + /* Fixing footer position for mobile screens */ + #footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: var(--default-glass-background); + border-top: var(--default-glass-border); + text-align: center; + padding: clamp(1vh, 10px, 1vw); + z-index: 1000; /* Ensure it stays above other elements */ + } + + /* Ensure body content doesn't overlap with footer */ + body { + margin-bottom: clamp(5vh, 50px, 5vw); /* Create space at the bottom for the footer */ + } +} diff --git a/cardie/static/main/home.css b/cardie/static/main/home.css index 47fe569..9d22b11 100644 --- a/cardie/static/main/home.css +++ b/cardie/static/main/home.css @@ -204,4 +204,33 @@ html { #dialog_home_delete { display: flex; flex-direction: column; -} \ No newline at end of file +} + +/* Footer styles */ +#footer { + background-color: var(--default-glass-background); + border-top: var(--default-glass-border); + text-align: center; + padding: clamp(1vh, 10px, 1vw); + width: 100%; +} + +@media (max-width: 1000px) { + /* Fixing footer position for mobile screens */ + #footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: var(--default-glass-background); + border-top: var(--default-glass-border); + text-align: center; + padding: clamp(1vh, 10px, 1vw); + z-index: 1000; /* Ensure it stays above other elements */ + } + + /* Ensure body content doesn't overlap with footer */ + body { + margin-bottom: clamp(5vh, 50px, 5vw); /* Create space at the bottom for the footer */ + } +} From f6645b8fa4343dff52c02265ef9500d0fd76c891 Mon Sep 17 00:00:00 2001 From: nfoert Date: Tue, 8 Oct 2024 16:31:20 -0400 Subject: [PATCH 3/3] Adjust position for the footer styles --- cardie/static/main/authentication.css | 22 +--------------------- cardie/static/main/footer.css | 2 +- cardie/static/main/home.css | 22 +--------------------- 3 files changed, 3 insertions(+), 43 deletions(-) diff --git a/cardie/static/main/authentication.css b/cardie/static/main/authentication.css index 01be963..0d4199d 100644 --- a/cardie/static/main/authentication.css +++ b/cardie/static/main/authentication.css @@ -93,24 +93,4 @@ html { text-align: center; padding: clamp(1vh, 10px, 1vw); width: 100%; -} - -@media (max-width: 1000px) { - /* Fixing footer position for mobile screens */ - #footer { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - background-color: var(--default-glass-background); - border-top: var(--default-glass-border); - text-align: center; - padding: clamp(1vh, 10px, 1vw); - z-index: 1000; /* Ensure it stays above other elements */ - } - - /* Ensure body content doesn't overlap with footer */ - body { - margin-bottom: clamp(5vh, 50px, 5vw); /* Create space at the bottom for the footer */ - } -} +} \ No newline at end of file diff --git a/cardie/static/main/footer.css b/cardie/static/main/footer.css index 7853f6d..ac811c0 100644 --- a/cardie/static/main/footer.css +++ b/cardie/static/main/footer.css @@ -106,7 +106,7 @@ @media (max-width: 1000px) { /* Small Screens */ .footer { - position: sticky; + position: static; bottom: 10px; left: 10px; display: flex; diff --git a/cardie/static/main/home.css b/cardie/static/main/home.css index 9d22b11..e90c317 100644 --- a/cardie/static/main/home.css +++ b/cardie/static/main/home.css @@ -213,24 +213,4 @@ html { text-align: center; padding: clamp(1vh, 10px, 1vw); width: 100%; -} - -@media (max-width: 1000px) { - /* Fixing footer position for mobile screens */ - #footer { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - background-color: var(--default-glass-background); - border-top: var(--default-glass-border); - text-align: center; - padding: clamp(1vh, 10px, 1vw); - z-index: 1000; /* Ensure it stays above other elements */ - } - - /* Ensure body content doesn't overlap with footer */ - body { - margin-bottom: clamp(5vh, 50px, 5vw); /* Create space at the bottom for the footer */ - } -} +} \ No newline at end of file