/*** 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;
}
body:not(.collapsed-menu) .thumbinner {
color: unset;
}
@media (max-width: 767px) {
.thumbinner {
width: auto !important; /* override style attribute */
}
.thumbinner .thumbimage {
width: auto;
}
}
.flexbox {
width: 100%;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
margin: 0px;
}
.flexelement {
border: 1px solid #c8ccd1;
padding: 6px;
background-color: #f8f9fa;
font-size: 94%;
text-align: left;
margin: 3px 3px 3px 0px;
display: flex;
flex: 1 0 250px;
flex-wrap: wrap;
flex-direction: column;
align-content: baseline;
align-items: stretch;
}
.flexelement a.image {
max-width: max-content;
}
.flexelement img {
width: 100%;
height: auto;
}
.flex_unten {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-grow: 1;
}
.flexelement.items_0 {
max-width: 80%;
float: right;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 0px;
}
.flexelement.items_1 {
flex-basis: 100%;
}
.flexelement.items_2 {
/* flex-basis: 47%; */
max-width: 49%;
min-width: 300px;
flex: 1 auto;
}
.flexelement.items_3 {
/* flex-basis: 31%; */
max-width: 32%;
min-width: 270px;
flex: 1 1 450px;
}
.flexelement.items_2-3 {
/* flex-basis: 47%; */
max-width: 66%;
min-width: 300px;
flex: 1 auto;
}
.flexelement.items_4 {
/* flex-basis: 24%; */
max-width: 25%;
min-width: 250px;
}
.flexelement.items_3-4 {
/* flex-basis: 47%; */
max-width: 73%;
min-width: 300px;
flex: 1 auto;
}
.flexelement.items_5 {
/* flex-basis: 19%; */
max-width: 20%;
min-width: 150px;
}
.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%;
}
.flexelement.items_left {
flex-grow: 2;
}
.flexelement.none {
display: none;
}
.whitecell {
border: 1px solid white;
background: white;
text-align: left;
}
/* Ende allgemeine Formatierungen */
/*** Beginn Formatierungen für Mobil-Geräte ***/
/*** Breakpoint lg ***/
@media (max-width: 992px) {
} /*** Ende Formatierungen für Breakpoint lg ***/
/*** Formatierungen für Breakpoint md ***/
@media (max-width: 768px) {
.flexelement.items_0 {
max-width: 100%;
float: right;
margin-left: 10px;
margin-bottom:10px;
margin-top: 0px;
}
.flexelement.items_1 {
flex-basis: 100%;
}
.flexelement.items_2 {
flex-basis: 100%;
}
.flexelement.items_3 {
flex-basis: 100%
/* max-width: 32%; */
/* min-width: 270px; */
/* flex: 1 1 450px; */
}
.flexelement.items_4 {
/* flex-basis: 24%; */
max-width: 49%;
min-width: 250px;
}
.flexelement.items_5 {
/* flex-basis: 19%; */
max-width: 49%;
min-width: 250px;
}
.flexelement.items_6 {
width: 33%;
max-width: 33%;
}
.flexelement.items_7 {
width: 25%;
max-width: 25%;
}
.flexelement.items_8 {
width: 25%;
max-width: 25%;
}
.flexelement.items_9 {
width: 25%;
max-width: 25%;
}
.flexelement.items_10 {
width: 25%;
max-width: 25%;
}
} /*** Ende Formatierungen für Breakpoint md ***/
/*** Formatierungen für Breakpoint sm ***/
@media (max-width: 576px) {
} /*** Ende Formatierungen für Mobil-Geräte ***/
Vorlage:Gallery3.css
Aus Securepoint Wiki