Hallo zusammen,

versuche bei folgender Seite die Leistungen grafisch vernünftig darzustellen, dies gelingt mir leider nicht so ganz:

Testseite

Ähnlich, wie hier:

Responsive Image Grids Using CSS

Wer kann mir dort weiterhelfen?

Grüße

Du solltest dein Problem und dein genaues Ziel etwas genauer schildern.

Was mir auffällt: Bei kleiner Browserbreite entsteht unter dem Bild ein weißer Abstand. Das passiert, weil die <li> eine feste Höhe haben und die Bilder beim Verkleinern des Browsers auch kleiner werden. Du müsstest die feste Höhe rausnehmen und beim Bild position: absolute entfernen.

Damit die Leistungen vernünftig "umbrechen", musst du Media Queries verwenden und z.B. die Breite der <li> auf 50% setzen (bzw. die horizontalen Abstände berücksichtigen), damit nur noch 2 Stück nebeneinander sitzen, oder auf 100% damit du nur noch eine Leistung pro Reihe hast.

... genauso wollte ich das haben, vielen Dank für deine Hilfe !

Grüße