CSS der Vignette
<style>
.pageTitle { font-size:1.5em; }
* { box-sizing:border-box; }
.flexCont { display:flex; flex-flow:row wrap; justify-content:space-between; }
.flexCont > a { display:none; }
.vgnTot { width:49.5%; max-width:480px; overflow:hidden; }
.combiCnt { position:relative; }
.combiImg img{ visibility:visible; width:100%; }
.combiTxt {
position:absolute;
left: 0; right:0;
padding-bottom:5%;
bottom: 10%;
font-weight:300;
color:white;
width: 100%
border:0px solid blue;
z-index:100000;
overflow:hidden;
background:rgba(0,0,0,0.4);
width:98%;margin:0 auto;
}
.combiTxt p.p1 {text-align:center; font-size:2.5em; font-weight:600; color:inherit; }
.combiTxt p.p2 {text-align:center; font-size:1.5em; color:inherit; }
.combiTxt p.p3 {text-align:center; font-size:2em; color:inherit; }
.combiTxt p.p4 {text-align:center; font-size:1em; font-weight:900; color:inherit; }
@media only screen and (max-width:48em) {
.flexCont { justify-content:space-around;}
.vgnTot { width:98%; margin-bottom:10px; }
}
</style>
.pageTitle { font-size:1.5em; }
* { box-sizing:border-box; }
.flexCont { display:flex; flex-flow:row wrap; justify-content:space-between; }
.flexCont > a { display:none; }
.vgnTot { width:49.5%; max-width:480px; overflow:hidden; }
.combiCnt { position:relative; }
.combiImg img{ visibility:visible; width:100%; }
.combiTxt {
position:absolute;
left: 0; right:0;
padding-bottom:5%;
bottom: 10%;
font-weight:300;
color:white;
width: 100%
border:0px solid blue;
z-index:100000;
overflow:hidden;
background:rgba(0,0,0,0.4);
width:98%;margin:0 auto;
}
.combiTxt p.p1 {text-align:center; font-size:2.5em; font-weight:600; color:inherit; }
.combiTxt p.p2 {text-align:center; font-size:1.5em; color:inherit; }
.combiTxt p.p3 {text-align:center; font-size:2em; color:inherit; }
.combiTxt p.p4 {text-align:center; font-size:1em; font-weight:900; color:inherit; }
@media only screen and (max-width:48em) {
.flexCont { justify-content:space-around;}
.vgnTot { width:98%; margin-bottom:10px; }
}
</style>
HTML der Vignette
Für den FlexCont = FlexKlammer:
<div class="vngTotal flexCont">
....
</div>
Für die Vignette:
<div class="vgnTot generale"> /* generale ist Platzhalter für die indiv. Bezeichnungen pro Vign */
<div class="combiCnt">
<a class="combiImg" >
<img src="$(Image.path)" href="http://LinkZiel/" target="_blank">
</a>
<div class="combiTxt">
<p class="p1">Stachelköpfe</p>
<p class="p2">Kakteen im Hohen Atlas</p>
<p class="p3">Reiseerlebnisse in Marokko</p>
<p class="p4">Land und Pflanzen</p>
</div>
</div>
</div><!-- vgnTot generale" -->
<div class="vngTotal flexCont">
....
</div>
Für die Vignette:
<div class="vgnTot generale"> /* generale ist Platzhalter für die indiv. Bezeichnungen pro Vign */
<div class="combiCnt">
<a class="combiImg" >
<img src="$(Image.path)" href="http://LinkZiel/" target="_blank">
</a>
<div class="combiTxt">
<p class="p1">Stachelköpfe</p>
<p class="p2">Kakteen im Hohen Atlas</p>
<p class="p3">Reiseerlebnisse in Marokko</p>
<p class="p4">Land und Pflanzen</p>
</div>
</div>
</div><!-- vgnTot generale" -->
jQ font-size Adaptive
<script>
$(document).ready(function(){
adapt_FSZ = function() {
bsz = 10;
if ($(window).width() < 480) { bsz = 8 };
fsz = bsz + $(window).width()/400;
$("body").css("font-size",fsz);
};
$(window).resize(function(){
//alert(" I'm resizing ");
adapt_FSZ();
});
adapt_FSZ();
alert(" I'm alive ");
});
</script>
$(document).ready(function(){
adapt_FSZ = function() {
bsz = 10;
if ($(window).width() < 480) { bsz = 8 };
fsz = bsz + $(window).width()/400;
$("body").css("font-size",fsz);
};
$(window).resize(function(){
//alert(" I'm resizing ");
adapt_FSZ();
});
adapt_FSZ();
alert(" I'm alive ");
});
</script>