[Frage] Bilder flackern, verschwinden und kommen wieder beim Skalieren von Responsive-Design (Media Query) TYPO3-Version: 6.2.7

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    13. 06. 2015, 13:46

    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


  • 1
  • casi-g casi-g
    R2-D2
    0 x
    77 Beiträge
    14 Hilfreiche Beiträge
    13. 06. 2015, 17:19

    Das liegt an deinen Margin Werten.
    6*14,6 = 87,6
    6*2,48 = 14,88

    4*22 = 88
    4*3,002 = 12,008

    Sind beide über 100%.

    Viel einfacher ist es aber wenn du dem außenrahmen ein

    box-sizing: border-box;
    gibst und dann padding Werte verwendest.

    http://codepen.io/anon/pen/OVgead

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    26. 10. 2015, 22:03

    Danke für guten Tipp!

    Viele Grüße

  • 1