Revert "fix: issue #212 - problem width page width on mobile devices" because it breaks all other usages of the container class, e.g. the navigation bar. Instead, prevent the browser from calculating the minimum width.

Author: siegfriedweber

src/css/base.css

@@ -118,12 +118,10 @@ body ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb-color);
 }
 
-@media screen and (min-width: 1024px) {
-  .container {
-    display: flex;
-    position: relative;
-    width: 100%;
-    max-width: 1280px;
-    margin: 0 auto;
-  }
+.container {
+  display: flex;
+  position: relative;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
 }

src/css/landing.css

@@ -1,39 +1,43 @@
-@media screen and (min-width: 768px) {
-  .boxes {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
+.boxes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 
-  .box {
-    flex: 0 30%;
-    min-height: 200px;
-    margin-bottom: 2%; /* (200-32*3)/2 */
-  }
+.box {
+  flex: 0 30%;
+  min-height: 200px;
+  margin-bottom: 2%; /* (200-32*3)/2 */
+}
 
-  .boxes.two-column .box {
-    flex: 0 48%;
-  }
+.boxes.two-column .box {
+  flex: 0 48%;
+}
 
-  .box h3 {
-    display: inline-block;
-  }
+.box h3 {
+  display: inline-block;
+}
 
-  .box div {
-    display: inline-block;
-  }
+.box div {
+  display: inline-block;
+}
 
-  .box p {
-    display: inline-block;
-  }
+.box p {
+  display: inline-block;
+}
 
-  .box .admonitionblock {
-    margin-top: 2.8rem;
-  }
+.box .admonitionblock {
+  margin-top: 2.8rem;
 }
 
 @media screen and (max-width: 1023.5px) {
   .box {
     flex: 0 47% !important;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .box {
+    flex: 0 100% !important;
+  }
+}

src/css/main.css

@@ -1,3 +1,7 @@
+main {
+  min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
+}
+
 @media screen and (max-width: 1023.5px) {
   aside.toc.sidebar {
     display: none;
@@ -11,7 +15,6 @@
 @media screen and (min-width: 1024px) {
   main {
     flex: auto;
-    min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
   }
 
   main > .content {