MediaWiki:Citizen.css: Difference between revisions

Line 505:

--------------------------------------------------------------------------

At 600-899px the homepage uses the available width as one broad content

column~~, while~~ icon groups ~~stay as compact centred rows. The grid columns are~~

column. The square icon groups need one component-specific split inside the

~~fixed~~-~~width~~, ~~not fractional, so seven icons do not stretch across the whole~~

tablet range: 600-799px keeps the stable four-column rhythm, while 800-899px

~~section and eight icons can still fit on one~~ row ~~where space allows~~.

has enough room for compact single-row groups. This avoids ugly orphan rows

such as 5+2 or 6+1.

========================================================================== */

@media screen and (min-width: 600px) and (max-width: 899px) {

Line 564:

Line 565:

.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {

display: grid;

grid-template-columns: repeat(~~auto-fit~~, 78px);

grid-template-columns: repeat(4, minmax(0, 78px));

gap: ~~10px 14px~~;

gap: 12px 16px;

justify-content: center;

justify-items: center;

Line 594:

Line 595:

font-size: 12px;

line-height: 1.15;

}

/* 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. */

@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);

gap: 10px 14px;

}