MediaWiki:Common.css: Difference between revisions
styling for responsive image gallery
(res-img 800,1000,1200 and banner-image border radius added) |
(styling for responsive image gallery) |
||
Line 462:
}
* Styling for a responsive image gallery with 4 coloumns
* FLEX FOR HORIZONTAL INFOBOXES▼
*********************************************************/
.row {
/* Create two unequal columns that sits next to each other */▼
display: flex;
/* left column */▼
.left-side-infobox {▼
background-color: #fff;▼
/*padding: 10px;*/▼
margin: 10px;▼
}
/* Create four equal columns that sits next to each other */
/* right column */▼
.right-side-infobox {▼
▲ flex: 50%;
background-color: #fff;▼
/*padding: 10px;*/▼
margin: 10px;▼
}▼
▲/* Create four equal columns that sits next to each other - useful for galleries
.column {
flex:
max-width:
/*background-color:var(--color-surface-1);*/
padding: 0 4px;▼
/*border:1px solid var(--border-color-base);*/
/*color:var(--color-base-emphasized);*/
border-radius: 8px;
/*box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);*/
margin: 5px;
}
Line 494 ⟶ 489:
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.column {
flex:
max-width:
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
Line 508 ⟶ 503:
max-width: 100%;
}
}
/******************************
▲ * FLEX FOR HORIZONTAL INFOBOXES
******************************/
▲/* Create two unequal columns that sits next to each other */
▲/* left column */
▲.left-side-infobox {
flex: 50%;
▲ background-color: #fff;
▲ /*padding: 10px;*/
▲ margin: 10px;
▲}
▲/* right column */
▲.right-side-infobox {
flex: 50%;
▲ background-color: #fff;
▲ /*padding: 10px;*/
▲ margin: 10px;
}
| |||