MediaWiki:Citizen.css: Difference between revisions

← Older edit Newer edit →

@@ Line 598: / Line 598: @@
 	/* Upper tablet widths can cleanly fit seven or eight compact icons in one
-	   row. Keep the cells fixed-width so the row stays visually tight. */
+	   row. Use flex here rather than auto-fit grid: auto-fit can create an
+	   empty eighth track for seven-item groups once there is enough width,
+	   while flex only lays out real icon items. */
 	@media screen and (min-width: 800px) {
 		.skin-citizen .wizlords-mainpage-items,
 		.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
 		.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
-			grid-template-columns: repeat(auto-fit, 78px);
+			display: flex;
+			flex-wrap: wrap;
 			gap: 10px 14px;
+			justify-content: center;
+			align-items: flex-start;
+		}
+		.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
+		.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
+			flex: 0 0 100%;
+			width: 100%;
+		}
+		.skin-citizen .wizlords-imagetext {
+			flex: 0 0 78px;
 		}
 	}