added adaptive rules for small screens

ludrol · ludrol · commit 4aae0373b9af · 2025-06-23T12:38:36.000+02:00
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -96,7 +96,7 @@ header nav {
   justify-content: center;
 }
 
-@media (max-width: 51em) {
+@media (min-width: 29em) and (max-width: 51em) {
   header nav {
     max-width: 100%;
     overflow: hidden;
@@ -150,6 +150,17 @@ header nav .button > span {
   }
 }
 
+@media (max-width: 29em){
+  header .inner .button {
+    min-width: 10em;
+    margin: auto;
+  }
+  header .inner nav {
+    flex-direction: column;  
+    }
+}
+
+
 .inner {
   padding: 0 1em 0 1em;
 }

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ header nav {`
`96`	`96`	`justify-content: center;`
`97`	`97`	`}`
`98`	`98`
`99`		`-@media (max-width: 51em) {`
	`99`	`+@media (min-width: 29em) and (max-width: 51em) {`
`100`	`100`	`header nav {`
`101`	`101`	`max-width: 100%;`
`102`	`102`	`overflow: hidden;`
`@@ -150,6 +150,17 @@ header nav .button > span {`
`150`	`150`	`}`
`151`	`151`	`}`
`152`	`152`
	`153`	`+@media (max-width: 29em){`
	`154`	`+ header .inner .button {`
	`155`	`+ min-width: 10em;`
	`156`	`+ margin: auto;`
	`157`	`+ }`
	`158`	`+ header .inner nav {`
	`159`	`+ flex-direction: column;`
	`160`	`+ }`
	`161`	`+}`
	`162`	`+`
	`163`	`+`
`153`	`164`	`.inner {`
`154`	`165`	`padding: 0 1em 0 1em;`
`155`	`166`	`}`