KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
(49 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/*** Beginn allgemeine Formatierungen ***/ | /*** Beginn allgemeine Formatierungen ***/ | ||
.thumb { | |||
margin-bottom: 0px; | |||
} | |||
.tright { | |||
margin: 0px; | |||
} | |||
.thumbinner { | |||
max-width:100%; | |||
border: 0px solid #c8ccd1; | |||
padding: 0px; | |||
background-color: #f8f9fa; | |||
font-size: 94%; | |||
text-align: left; | |||
overflow: hidden; | |||
} | |||
.flexbox { | .flexbox { | ||
Zeile 14: | Zeile 33: | ||
align-items: stretch; | align-items: stretch; | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
padding: | padding: 6px; | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
font-size: 94%; | font-size: 94%; | ||
text-align: left; | text-align: left; | ||
overflow: hidden; | /*overflow: hidden;*/ | ||
margin: 3px 3px 3px 0px; | margin: 3px 3px 3px 0px; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | |||
.flexelement.items_0 { | |||
max-width: 80%; | |||
float: right; | |||
margin-left: 10px; | |||
margin-bottom:10px; | |||
margin-top: 0px; | |||
} | } | ||
Zeile 34: | Zeile 63: | ||
.flexelement.items_3 { | .flexelement.items_3 { | ||
width: 31%; | /* width: 31%; */ | ||
max-width:31%; | max-width:31%; | ||
} | } | ||
Zeile 71: | Zeile 100: | ||
width: 9%; | width: 9%; | ||
max-width:9%; | max-width:9%; | ||
} | } | ||
Zeile 96: | Zeile 111: | ||
@media (max-width: 992px) { | @media (max-width: 992px) { | ||
.flexelement { | .flexelement { | ||
align-items: stretch; | align-items: stretch; | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
Zeile 106: | Zeile 119: | ||
overflow: hidden; | overflow: hidden; | ||
margin: 3px; | margin: 3px; | ||
margin: 3px 3px 3px 0px; | |||
} | |||
.flexelement.items_0 { | |||
width: 50%; | |||
max-width:50%; | |||
} | } | ||
Zeile 114: | Zeile 133: | ||
.flexelement.items_2 { | .flexelement.items_2 { | ||
width: | width: 47%; | ||
max-width: | max-width:47%; | ||
} | } | ||
Zeile 174: | Zeile 193: | ||
overflow: hidden; | overflow: hidden; | ||
margin: 3px; | margin: 3px; | ||
} | |||
.flexelement.items_0 { | |||
width: 66%; | |||
max-width: 66%; | |||
} | } | ||
Zeile 226: | Zeile 250: | ||
} | } | ||
td { | .flexbox td { | ||
display: block; | display: block; | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
Zeile 234: | Zeile 258: | ||
/* Breakpoint sm */ | /* Breakpoint sm */ | ||
@media (max-width: 576px) { | @media (max-width: 576px) { | ||
.sptable2 .flexbox { | |||
display:grid; | |||
} | |||
.sptable2 .flexbox p{ | |||
display:none; | |||
} | |||
.sptable2 .flexbox .flexelement p{ | |||
display:flex; | |||
} | |||
.flexelement { | .flexelement { | ||
Zeile 246: | Zeile 282: | ||
overflow: hidden; | overflow: hidden; | ||
margin: 3px; | margin: 3px; | ||
} | |||
.flexelement.items_0 { | |||
width: 100%; | |||
max-width: 100%; | |||
margin-top: 10px; | |||
} | } | ||
Zeile 296: | Zeile 338: | ||
width: 19%; | width: 19%; | ||
max-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_0 { | |||
width: 100%; | |||
max-width:100%; | |||
margin-top: 10px; | |||
margin-bottom: 10px; | |||
} | |||
.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 */ | } /* Ende Formatierungen für Mobil-Geräte */ |
Aktuelle Version vom 20. Januar 2020, 14:51 Uhr
/*** Beginn allgemeine Formatierungen ***/ .thumb { margin-bottom: 0px; } .tright { margin: 0px; } .thumbinner { max-width:100%; 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; } .flexelement { align-items: stretch; border: 1px solid #c8ccd1; padding: 6px; background-color: #f8f9fa; font-size: 94%; text-align: left; /*overflow: hidden;*/ margin: 3px 3px 3px 0px; flex-wrap: wrap; } .flexelement.items_0 { max-width: 80%; float: right; margin-left: 10px; margin-bottom:10px; margin-top: 0px; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 47%; max-width:47%; } .flexelement.items_3 { /* width: 31%; */ max-width:31%; } .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 ***/ /* 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; margin: 3px 3px 3px 0px; } .flexelement.items_0 { width: 50%; max-width:50%; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 47%; max-width:47%; } .flexelement.items_3 { width: 47%; max-width:47%; } .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_0 { width: 66%; max-width: 66%; } .flexelement.items_1 { width: 100%; max-width:100%; } .flexelement.items_2 { width: 100%; max-width:100%; } .flexelement.items_3 { width: 47%; max-width:47%; } .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%; } .flexbox td { display: block; margin-bottom: 0px; } } /* Ende Breakpoint md */ /* Breakpoint sm */ @media (max-width: 576px) { .sptable2 .flexbox { display:grid; } .sptable2 .flexbox p{ display:none; } .sptable2 .flexbox .flexelement p{ display:flex; } .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_0 { width: 100%; max-width: 100%; margin-top: 10px; } .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: 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_0 { width: 100%; max-width:100%; margin-top: 10px; margin-bottom: 10px; } .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 */