Vorlage:Gallery3.css: Unterschied zwischen den Versionen

Version vom 14. Juli 2020, 11:42 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;
	}


body:not(.collapsed-menu) .thumbinner {
     color: red;
}

@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 {
	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; */
	flex: 1 0 250px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	}

.flexelement img {
	width: 100%;
	height: auto;
}



.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%;
	}

.flexelement.items_3 {
	/* flex-basis: 31%; */
	max-width: 32%;
	min-width: 270px;
	flex: 1 1 450px;
	}

.flexelement.items_4 {
	/* flex-basis: 24%; */
	max-width: 25%;
	min-width: 250px;
	}

.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%;
	}

/* 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 ***/