Template:Content/styles.css: Difference between revisions

From Delanor Wiki
Jump to navigation Jump to search
Created page with ".tile-row { display: flex; flex-wrap: nowrap; justify-content: center; margin-bottom: 2em; gap: 1.5%; overflow-x: auto; } .tile-row > div { flex: 0 0 18%; min-width: 160px; max-width: 200px; display: flex; flex-direction: column; align-items: center; } .tile-top { text-align: center; width: 100%; } .tile-bottom h2 { margin: 0.4em 0 0; text-align: center; font-size: 1.1em; } @media (max-width: 800px) {..."
 
No edit summary
Line 1: Line 1:
.tile-row {
.tile-row {
     display: flex;
     display: flex;
     flex-wrap: nowrap;
     flex-wrap: wrap; /* allow multiple rows */
     justify-content: center;
     justify-content: center;
     margin-bottom: 2em;
     gap: 1.5em;
     gap: 1.5%;
     margin: 1em auto 2em auto;
     overflow-x: auto;
     max-width: 1200px;
}
}
.tile-row > div {
.tile-row > div {
     flex: 0 0 18%;
     flex: 1 1 180px;
    min-width: 160px;
     max-width: 220px;
     max-width: 200px;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
}
}
.tile-top {
.tile-top {
     text-align: center;
     text-align: center;
     width: 100%;
     width: 100%;
}
}
.tile-bottom h2 {
.tile-bottom h2 {
     margin: 0.4em 0 0;
     margin: 0.4em 0 0;
Line 24: Line 26:
     font-size: 1.1em;
     font-size: 1.1em;
}
}
@media (max-width: 800px) {
@media (max-width: 800px) {
     .tile-row {
     .tile-row {
         flex-wrap: wrap;
         gap: 1em;
        justify-content: center;
     }
     }
     .tile-row > div {
     .tile-row > div {
         flex: 0 1 45%;
         flex: 1 1 45%;
        margin-bottom: 1em;
     }
     }
}
}

Revision as of 05:19, 26 July 2025

.tile-row {
    display: flex;
    flex-wrap: wrap; /* allow multiple rows */
    justify-content: center;
    gap: 1.5em;
    margin: 1em auto 2em auto;
    max-width: 1200px;
}

.tile-row > div {
    flex: 1 1 180px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tile-top {
    text-align: center;
    width: 100%;
}

.tile-bottom h2 {
    margin: 0.4em 0 0;
    text-align: center;
    font-size: 1.1em;
}

@media (max-width: 800px) {
    .tile-row {
        gap: 1em;
    }
    .tile-row > div {
        flex: 1 1 45%;
    }
}