From 4f93be86f144aca49b566791831d198e05687a37 Mon Sep 17 00:00:00 2001 From: Kira Date: Wed, 17 May 2023 02:11:49 +0100 Subject: Make charts responsive Charts now take the width of the whole screen when the window is below 1200px --- src/static/style.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/static/style.css b/src/static/style.css index c363de6..d2d46f1 100644 --- a/src/static/style.css +++ b/src/static/style.css @@ -108,6 +108,13 @@ aside form p { flex-direction: row-reverse; } +/* Use a media query to add a breakpoint at 800px: */ +@media screen and (max-width: 1200px) { + #multicharts ul li { + width: 100%; + } +} + .minichart { min-height: 220px; width: 100%; @@ -125,10 +132,6 @@ aside form p { font-size: small; } -.chart { - -} - .bottom_text { display: inline-flex; margin: 0.5rem; -- cgit v1.2.3 From 218b301505bfa295b9f5cfc4bef92669ed36d936 Mon Sep 17 00:00:00 2001 From: Kira Date: Wed, 17 May 2023 02:17:11 +0100 Subject: Add metatag to make responsive --- src/templates/template.html.j2 | 1 + 1 file changed, 1 insertion(+) diff --git a/src/templates/template.html.j2 b/src/templates/template.html.j2 index 02da03a..834e798 100644 --- a/src/templates/template.html.j2 +++ b/src/templates/template.html.j2 @@ -1,6 +1,7 @@ + UK Gender Pay Gap :: {{ title }} -- cgit v1.2.3 From f2bd84f516654fd7d8bdd34199842abefb0e3b24 Mon Sep 17 00:00:00 2001 From: Kira Date: Wed, 17 May 2023 02:26:05 +0100 Subject: Make search bar stick to the top center of the page on mobile --- src/static/style.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/static/style.css b/src/static/style.css index d2d46f1..ee35cae 100644 --- a/src/static/style.css +++ b/src/static/style.css @@ -112,7 +112,44 @@ aside form p { @media screen and (max-width: 1200px) { #multicharts ul li { width: 100%; + min-height: 500px; + height: 100%; } + + aside { + float: none; + margin: auto; + width: 25%; + display: block; + justify-content: center; + text-align: center; + } + + #searchform { + width: 100%; + margin: auto; + } + + aside form input[type="submit"] { + margin-top: 3px; + margin: auto; + background-color: black; + color: white; + border-radius: 5px; + border: 2px solid black; + } + + +input[type="search"] { + padding: 3px 5px; + box-sizing: border-box; + border: 2px solid black; + margin: auto; +} + + + + /* input[type="search"] {} */ } .minichart { -- cgit v1.2.3