Vorlage:RandomOrganisation/style.css: Unterschied zwischen den Versionen
Aus Sacra.Wiki
Ansichten
Aktionen
Namensräume
Varianten
Werkzeuge
Admin (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „.organisation-container { display: grid; grid-template-columns: 25% 25% 25% 25%; } @media screen and (max-width: 1200px) { .organisation-container {…“) |
Admin (Diskussion | Beiträge) |
||
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
.organisation-container { | .organisation-container { | ||
margin: 20px 0 10px 0; | |||
display: grid; | display: grid; | ||
grid-template-columns: 25% 25% 25% 25%; | grid-template-columns: 25% 25% 25% 25%; | ||
Zeile 20: | Zeile 21: | ||
.random-organisation { | .random-organisation { | ||
margin: 4px; | margin: 4px; | ||
display: flex; | |||
flex-direction: column; | |||
border-radius: 8px; | border-radius: 8px; | ||
border: 1px solid rgba(0, 0, 0, 0.05); | border: 1px solid rgba(0, 0, 0, 0.05); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.random-organisation | .random-organisation img { | ||
width: 100%; | |||
height: 250px; | |||
object-fit: cover; | |||
} | |||
.random-organisation--name { | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
} | |||
.random-organisation--name span { | |||
font-weight: 500; | |||
font-size: 16px; | font-size: 16px; | ||
text-align: center; | text-align: center; | ||
padding: 16px 16px 8px 16px; | |||
margin-top: 0; | |||
} | |||
.random-organisation--name:last-child span { | |||
padding: 16px; | padding: 16px; | ||
} | } |
Aktuelle Version vom 27. September 2022, 16:18 Uhr
.organisation-container {
margin: 20px 0 10px 0;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
@media screen and (max-width: 1200px) {
.organisation-container {
grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
}
}
@media screen and (max-width: 1200px) {
.organisation-container {
grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
}
}
@media screen and (max-width: 992px) {
.organisation-container {
grid-template-columns: 50% 50%;
}
}
.random-organisation {
margin: 4px;
display: flex;
flex-direction: column;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.random-organisation img {
width: 100%;
height: 250px;
object-fit: cover;
}
.random-organisation--name {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.random-organisation--name span {
font-weight: 500;
font-size: 16px;
text-align: center;
padding: 16px 16px 8px 16px;
margin-top: 0;
}
.random-organisation--name:last-child span {
padding: 16px;
}