MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 6: / Line 6: @@
   * Skin shells and navigation belong in the relevant skin stylesheet.
   */
+/* ==========================================================================
+   Responsive Layout Standard
+   --------------------------------------------------------------------------
+   Project-wide layout ranges:
+   - Phone:                           0-599px
+   - Tablet / large phone:          600-899px
+   - Small desktop / landscape:    900-1199px
+   - Full desktop:                    1200px+
+   Component-specific queries should use these boundaries unless a documented
+   intrinsic-size constraint requires an additional breakpoint.
+   ========================================================================== */
 /* ==========================================================================
@@ Line 1,075: / Line 1,087: @@
 }
-@media (max-width: 1100px) {
+/* Tablet and small-desktop layouts use a three-column grid. */
+@media (min-width: 600px) and (max-width: 1199px) {
 	.wiz-grid {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
@@ Line 1,081: / Line 1,094: @@
 }
-@media (max-width: 700px) {
+/* Phone layout uses two columns. */
+@media (max-width: 599px) {
 	.wiz-grid {
 		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
@@ Line 1,809: / Line 1,823: @@
 }
-@media (max-width: 900px) {
+/* Phone and tablet card placement reset; the phone query below then reduces
+   these grids from two columns to one. */
+@media (max-width: 899px) {
 	.wizlords-class-card-grid,
 	.wizlords-spell-card-grid {
@@ Line 1,840: / Line 1,856: @@
 }
-@media (max-width: 620px) {
+/* Phone card layout. */
+@media (max-width: 599px) {
 	.wizlords-class-card-grid,
 	.wizlords-spell-card-grid {