add responsive
authorrick <rick@gnous.eu>
Sun, 13 Oct 2024 16:56:08 +0000 (18:56 +0200)
committerrick <rick@gnous.eu>
Sun, 13 Oct 2024 16:56:08 +0000 (18:56 +0200)
css/style.css
header.html

index 1b658d7c2c11ec7e5ef44d844fccd3447b03b665..478a6192d92cae6105f88d4c21c8169cdeb064cd 100644 (file)
@@ -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;
+  }
+}
index 51a68f286938f1aa0bfeb5b8128de8797076eb8b..d4dbdc51536d52b79761198968e38bb562ce1cba 100644 (file)
@@ -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" />