add responsive

2024-10-13 18:56:08 +02:00 · 2024-10-13 18:56:08 +02:00 · dfe6575b26
commit dfe6575b26
parent 09d1777aa7
2 changed files with 44 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -130,3 +130,46 @@ footer {
 #buttons div {
  margin-bottom: 1em;
 }
+
+@media only screen and (max-width: 641px) {
+  body {
+    grid-template-areas:
+      "header header"
+      "main main"
+      "menu menu"
+      "footer footer";
+  }
+
+  #header-links {
+    position: sticky;
+    bottom: 0;
+    margin-left: 0;
+    margin-top: 0;
+    flex-direction: row;
+    background-color: white;
+    border-top: solid black;
+    flex-wrap: wrap;
+  }
+
+  header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #lang {
+    justify-items: center;
+  }
+
+  #main {
+    margin: 2em 1em 2em 1em;
+  }
+
+  #footer-main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pred-buttons {
+    align-self: center;
+  }
+}
--- a/header.html
+++ b/header.html
@ -2,6 +2,7 @@
 <html lang="%lang%">
    <head>
        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
        <link rel="icon" href="/img/favicon.gif" type="image/gif" />
        <link rel="stylesheet" href="/css/style.css" />