KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
Zeile 56: | Zeile 56: | ||
width: 31%; | width: 31%; | ||
max-width:31%; | max-width:31%; | ||
background: red; | /*background: red;*/ | ||
} | } | ||
Version vom 31. Mai 2019, 08:33 Uhr
/*** Beginn allgemeine Formatierungen ***/ .thumb { margin-bottom: 0px; } .tright { margin: 0px; } .thumbinner { max-width:100%!important; border: 0px solid #c8ccd1; padding: 0px; background-color: #f8f9fa; font-size: 94%; text-align: left; overflow: hidden; } .flexbox { width: 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; margin: 0px; } /*red*/ .flexelement { align-items: stretch; border: 1px solid #c8ccd1; /* padding: 0px 3px;*/ background-color: #f8f9fa; font-size: 94%; text-align: left; /*overflow: hidden;*/ margin: 3px 3px 3px 0px; flex-wrap: wrap; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 47%; max-width:47%; } .flexelement.items_3 { width: 31%; max-width:31%; /*background: red;*/ } .flexelement.items_4 { width: 24%; max-width:24%; } .flexelement.items_5 { width: 19%; max-width:19%; } .flexelement.items_6 { width: 16%; max-width:16%; } .flexelement.items_7 { width: 13%; max-width:13%; } .flexelement.items_8 { width: 12%; max-width:12%; } .flexelement.items_9 { width: 11%; max-width:11%; } .flexelement.items_10 { width: 9%; max-width:9%; } /* Ende allgemeine Formatierungen */ /*** Beginn Formatierungen für Mobil-Geräte ***/ /* yellow */ /* Breakpoint lg */ @media (max-width: 992px) { .flexelement { align-items: stretch; border: 1px solid #c8ccd1; /* padding: 6px;*/ background-color: #f8f9fa; font-size: 94%; text-align: center; overflow: hidden; margin: 3px; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 100%; max-width:100%; } .flexelement.items_3 { width: 47%; max-width:47%; /* background: yellow;*/ } .flexelement.items_4 { width: 32%; max-width:32%; } .flexelement.items_5 { width: 24%; max-width:24%; } .flexelement.items_6 { width: 19%; max-width:19%; } .flexelement.items_7 { width: 15%; max-width:15%; } .flexelement.items_8 { width: 15%; max-width:15%; } .flexelement.items_9 { width: 12%; max-width:12%; } .flexelement.items_10 { width: 11%; max-width:11%; } } /* Ende Breakpoint lg */ /* Breakpoint md */ @media (max-width: 768px) { .flexelement { width:100%; max-width:100%; align-items: stretch; border: 1px solid #c8ccd1; padding: 6px; background-color: #f8f9fa; font-size: 94%; text-align: center; overflow: hidden; margin: 3px; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 100%; max-width:100%; } .flexelement.items_3 { width: 47%; max-width:47%; /* background: lightgreen;*/ } .flexelement.items_4 { width: 47%; max-width:47%; } .flexelement.items_5 { width: 32%; max-width:32%; } .flexelement.items_6 { width: 32%; max-width:32%; } .flexelement.items_7 { width: 24%; max-width:24%; } .flexelement.items_8 { width: 19%; max-width:19%; } .flexelement.items_9 { width: 15%; max-width:15%; } .flexelement.items_10 { width: 13%; max-width: 13%; } td { display: block; margin-bottom: 0px; } } /* Ende Breakpoint md */ /* Breakpoint sm */ @media (max-width: 576px) { .flexelement { width:100%; max-width:100%; align-items: stretch; border: 1px solid #c8ccd1; padding: 6px; background-color: #f8f9fa; font-size: 94%; text-align: center; overflow: hidden; margin: 3px; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 100%; max-width:100%; } .flexelement.items_3 { width: 100%; max-width:100%; background: green; } .flexelement.items_4 { width: 47%; max-width:47%; } .flexelement.items_5 { width: 47%; max-width:47%; } .flexelement.items_6 { width: 47%; max-width:47%; } .flexelement.items_7 { width: 32%; max-width:32%; } .flexelement.items_8 { width: 24%; max-width:24%; } .flexelement.items_9 { width: 24%; max-width:24%; } .flexelement.items_10 { width: 19%; max-width: 19%; } } /* Ende Breakpoint sm */ /* Breakpoint xs */ @media (max-width: 300px) { .flexelement { align-items: stretch; border: 1px solid #c8ccd1; padding: 6px; background-color: #f8f9fa; font-size: 94%; text-align: center; overflow: hidden; margin: 3px; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 100%; max-width:100%; } .flexelement.items_3 { width: 100%; max-width:100%; } .flexelement.items_4 { width: 100%; max-width:100%; } .flexelement.items_5 { width: 100%; max-width:100%; } .flexelement.items_6 { width: 100%; max-width:100%; } .flexelement.items_7 { width: 100%; max-width:100%; } .flexelement.items_8 { width: 100%; max-width:100%; } .flexelement.items_9 { width: 100%; max-width:100%; } .flexelement.items_10 { width: 100%; max-width: 100%; } } /* Ende Formatierungen für Mobil-Geräte */