diff options
| author | Eden Attenborough <eddie.atten.ea29@gmail.com> | 2023-05-17 13:06:54 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-05-17 13:06:54 +0100 |
| commit | b8832094f9f9c21e13e18d679b46005716e7fb9a (patch) | |
| tree | 09bf02a2c7f9ed7b5733f39ddc37854dbba49c51 | |
| parent | 665bf3fe78aa28f91090783d35db3666e10258a8 (diff) | |
| parent | f2bd84f516654fd7d8bdd34199842abefb0e3b24 (diff) | |
| download | UKGenderPayGap-b8832094f9f9c21e13e18d679b46005716e7fb9a.tar.gz UKGenderPayGap-b8832094f9f9c21e13e18d679b46005716e7fb9a.zip | |
Merge pull request #2 from kira0x1/Feature/Responsive
Make charts responsive
| -rw-r--r-- | src/static/style.css | 48 | ||||
| -rw-r--r-- | src/templates/template.html.j2 | 1 |
2 files changed, 45 insertions, 4 deletions
diff --git a/src/static/style.css b/src/static/style.css index c363de6..ee35cae 100644 --- a/src/static/style.css +++ b/src/static/style.css @@ -108,6 +108,50 @@ 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%; + 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 { min-height: 220px; width: 100%; @@ -125,10 +169,6 @@ aside form p { font-size: small; } -.chart { - -} - .bottom_text { display: inline-flex; margin: 0.5rem; 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 @@ <!DOCTYPE HTML> <html> <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>UK Gender Pay Gap :: {{ title }}</title> <!-- JQuery and JQurty UI current version --> |