samedi 13 juin 2015

Bilder flackern, verschwinden und kommen wieder bei Responsive-Design (Media Query)

Hallo alle zusammen,

ich habe ein etwas kurioses Problem. Versuche einen ganz einfachen responsiven Effekt auf die Beine zu stellen. In einem Rahmen befinden sich 6 Bilder nebeneinander. Benutze ich die Media Query, um bei kleinerer Width nur noch vier Bilder pro Linie zu haben, funktioniert das ganze zwar, aber die Bilder inklusive der Rahmen flackern. Und erwischt man beim Skalieren so eine Flackerstelle und skaliert an dieser Stelle nicht weiter, dann sind und bleiben sie sogar ganz verschwunden.

HTML:
<div id="test"><div id="testerrahmen">

<div class="testaussenrahmen"><div class="testinnenrahmen"><img src="test.jpg" style="max-width:100%;height:auto;" alt="" /></div>TEST</div>

<div class="testaussenrahmen"><div class="testinnenrahmen"><img src="test.jpg" style="max-width:100%;height:auto;" alt="" /></div>TEST</div>

<div class="testaussenrahmen"><div class="testinnenrahmen"><img src="test.jpg" style="max-width:100%;height:auto;" alt="" /></div>TEST</div>

...

</div></div>

NORMALES CSS:
#test{
width:100%;
float:left;
clear:both;
margin-bottom:25px;
padding-bottom:25px;
}

#testerrahmen{
padding:0 25px 0 25px 0;
margin: 0 auto;
}

.testrahmen{
margin:0 auto;
padding-top:30px;
width:100%;
float:left;
clear:both;
}

.testinnenrahmen{
box-shadow: 0px 0px 2px #dddddd;
padding:3px 3px 0 3px;
border-color: #dddddd;
border-width: 1px;
border-style: solid;
margin-bottom:12px;

}

.testaussenrahmen{
width:14.6%;
float:left;
text-align:center;
margin: 0 2.48% 2% 0;
margin-top:15px;

}


Um es responsiv zu machen, habe ich lediglich die Größe von testaussrahmen geändert. Dabei tritt der Flicker-Effekt schon auf.

CSS Query:

@media only screen and (min-width : 901px) and (max-width : 1024px) {


.stestrahmen{
width:100% !IMPORTANT;
margin: 0 auto !IMPORTANT;
text-align:center !IMPORTANT;

}

.testaussenrahmen{
width:22% !IMPORTANT;
float:left !IMPORTANT;
margin: 15px 3.002% 2% 0 !IMPORTANT;

}

}

Was kann ich tun, damit es nicht flickert/flackert und verschwindet und dann mal wieder auftaucht, wenn ich weiter skaliere?

Vielen Dank


Bilder flackern, verschwinden und kommen wieder bei Responsive-Design (Media Query)

Aucun commentaire:

Enregistrer un commentaire