fixed css to define max AND min

index.css

@@ -5,7 +5,6 @@
 header {
   align-items: center;
   display: flex;
-  height: 10vh;
   background-color: deeppink;
   margin-bottom: 1vh;
 }
@@ -88,7 +87,7 @@ footer{
   }
 }
 
-@media only screen and (max-width: 500px) {
+@media screen and (max-width: 400px) {
   [class*="bannerHeader"] {
     font-size: 7vh;
     color: #fff;
@@ -108,9 +107,10 @@ footer{
     grid-row-start: 2;
     grid-row-end: 2;
   }
-  [class*="infoContainer"] {
+  .infoContainer {
-    display: grid;
+  margin-left: 10vw;
-    grid-template-columns: auto;
+  margin-right: 10vw;
+  display: grid;
   }
   [class*="infoImg"] {
     width: 60vw;
@@ -119,11 +119,22 @@ footer{
   .linkContainer {
     grid-template-columns: auto auto;
   }
-  .info {
+  [class*="info"] {
-    font-size: 6vw;
+    font-size: 8vw;
   }
+  .infoDiv {
+  display: grid;
+  width: 80vw;
+  text-align: left;
+  justify-content: center
+  justify-self: none;
+  }
+
   .infoHeader {
-    font-size: 9vw;
+    font-size: 10vw;
+    margin-top: 5vw;
+    margin-bottom: 0vw;  
+    color: deeppink;
   }
   .grid-container {
     display: grid;
@@ -139,6 +150,19 @@ footer{
   }
 }
 
+@media screen and (min-width: 400px) {
+
+  .info {
+    font-size: 2vw;
+  }
+  .infoDiv {
+  display: grid;
+  width: 50vw;
+  text-align: justify;
+  justify-content: center
+  justify-self: none;
+  }
+
 .infoImg {
   width: 30vw;
 }
@@ -157,17 +181,6 @@ footer{
   justify-self: none;
 }
 
-.infoDiv {
-  display: grid;
-  width: 50vw;
-  text-align: justify;
-  justify-content: center
-  justify-self: none;
-}
-
-.info {
-  font-size: 2vw;
-}
 
 .infoHeader {
   font-size: 3vw;
@@ -176,16 +189,6 @@ footer{
   color: deeppink;
 }
 
-.model0 {
+
-  width: 50vw;
-  height: 100vh;
-}
-.model1 {
-  width: 50vw;
-  height: 100vh;
 }
 
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto;
-}

index.php

@@ -43,7 +43,7 @@
 
 	<center>
 
-        <header style="height: 10vh;">
+        <header>
 
                 <img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo">
 

locale.yaml

@@ -40,7 +40,7 @@ info3Header:
   de-DE:  Open Source
   en-US:  Open Source
 info4:
-  de-DE:  Die Software des KaosCubes baut auf den Grundprogrammiersprachen des Internets sowie Standard Bibliotheken aller Linux Systeme auf. Das heißt der Code ist wartungsfreundlich und sehr kurz. Die Benutzeroberfläche ist einfach gehalten. In deiner Wunschfarbe. Schau dir Informationen an, die dir alles Wichtige erklären. Dabei kannst du so tief einsteigen, wie es dir passt. 
+  de-DE:  Die Software des KaosCubes baut auf den Standard Bibliotheken aller Linux Systeme auf. Das heißt der Code ist wartungsfreundlich und sehr kurz. Die Benutzeroberfläche ist einfach gehalten. In deiner Wunschfarbe. 
   en-US:  The software of the KaosCube is based on the basic programming languages of the Internet and standard libraries of all Linux systems. This means that the code is easy to maintain and very short. The user interface is kept simple. In the colour of your choice. Look at the information that explains everything important to you. You can go as deep as you like.
 info4Header:
   de-DE:  Einfachheit