Template:Card flex/styles.css: Difference between revisions

From WikiMSK
No edit summary
No edit summary
ย 
Line 3: Line 3:
}
}


/* one item */
.cardflex .card-container{
.cardflex .card-container:nth-last-child(1) {
width:33%
/* -or- li:only-child { */
ย  ย  width: 100%;
}
}
/* two items */
.cardflex .card-container:nth-last-child(2),
.cardflex .card-container:nth-last-child(2) {
ย  ย  width: 50%;
}
/* three items */
.cardflex .card-container:nth-last-child(3),
.cardflex .card-container:nth-last-child(3) {
ย  ย  width: 33.3333%;
}
/* four items */
.cardflex .card-container:nth-last-child(4),
.cardflex .card-container:nth-last-child(4) {
ย  ย  width: 25%;
}
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 1200px) {
.cardflexย  .card-container{
.cardflexย  .card-container{

Latest revision as of 21:39, 19 March 2022

.cardflex {
	display:flex; flex-direction: row; flex-wrap: wrap;
}

.cardflex .card-container{
	width:33%
}
@media only screen and (max-width: 1200px) {
	.cardflex  .card-container{
		width:50%;
	}
}

@media only screen and (max-width: 1000px) {
	.cardflex  .card-container{
		width:100%;
	}
}