max-width: 100% for phones with screens narrower than 400px

simonw · web-flow · commit 2c59da733016 · 2024-10-20T16:20:27.000-07:00
https://urbanists.social/@georgelund/113342149599402190
diff --git a/text-wrap-balance-nav.html b/text-wrap-balance-nav.html
@@ -15,6 +15,7 @@
             padding: 10px;
             margin-bottom: 20px;
             width: 400px;
+            max-width: 100%;
             box-sizing: border-box;
         }
         ul {
@@ -36,7 +37,8 @@
         }
         .controls {
             margin-top: 20px;
-            width: 400px; /* Reduced from 600px to 400px to match nav */
+            width: 400px;
+            max-width: 100%;
         }
         .control-item {
             margin-bottom: 10px;

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`padding: 10px;`
`16`	`16`	`margin-bottom: 20px;`
`17`	`17`	`width: 400px;`
	`18`	`+ max-width: 100%;`
`18`	`19`	`box-sizing: border-box;`
`19`	`20`	`}`
`20`	`21`	`ul {`
`@@ -36,7 +37,8 @@`
`36`	`37`	`}`
`37`	`38`	`.controls {`
`38`	`39`	`margin-top: 20px;`
`39`		`- width: 400px; /* Reduced from 600px to 400px to match nav */`
	`40`	`+ width: 400px;`
	`41`	`+ max-width: 100%;`
`40`	`42`	`}`
`41`	`43`	`.control-item {`
`42`	`44`	`margin-bottom: 10px;`