Category view used css media queries to set column count to 3 beyond 768px and
reduces the count to 1 below it. This behaviour has been changed by setting the
column width to 25em and allowing the column number to adjust automatically.
As a result, media queries have been removed.
See https://css-tricks.com/almanac/properties/c/column-width/
Follow up on https://gerrit.wikimedia.org/r/#/c/187952/
Bug: T55130
Change-Id: I20b68dea8f64b2d07866f4aa20ef83941c879697
@import "mediawiki.mixins";
.mw-category {
@import "mediawiki.mixins";
.mw-category {
+ .column-count(3);
+ .column-width(25em);
- .column-break-inside(avoid);
- }
-}
-@media screen and ( min-width: 768px ) {
- .mw-category {
- .column-count(3);
+ li {
+ .column-break-inside-avoid;
+ }
.column-count(@value) {
-webkit-column-count: @value;
-moz-column-count: @value;
.column-count(@value) {
-webkit-column-count: @value;
-moz-column-count: @value;
- -o-column-count: @value;
-.column-break-inside(@value) {
- -webkit-column-break-inside: @value; // Chrome Any, Safari 3+, Opera 11.1+
- page-break-inside: @value; // Firefox 1.5+
- break-inside: @value; // IE 10+
+.column-width(@value) {
+ -webkit-column-width: @value;// Chrome Any, Safari 3+, Opera 11.1+
+ -moz-column-width: @value;// Firefox 1.5+
+ column-width: @value;// IE 10+
+}
+
+.column-break-inside-avoid {
+ -webkit-column-break-inside: avoid; // Chrome Any, Safari 3+, Opera 11.1+
+ page-break-inside: avoid; // Firefox 1.5+
+ break-inside: avoid-column; // IE 10+