nicht angemeldet
Probleme mit srcset, sizes & calc() in CSS-Grid ab bestimmten Breakpoint
Gunnar BittersmannWarum nehmen die Spalten nicht mehr den ganzen Platz ein ab dem Breakpoint 992px?
Die folgende Beispiel-HTML-Datei zeigt die Problematik und wie sie mit calc() unschön gerade gebogen werden kann. Die HTML-Datei läd die Bootstrap CSS-Datei von einem CDN-Server.
Werde mich mal umgucken wo ich meine Quellcodes zukünftig online zugänglich machen kann.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Warum nehmen Spalten nicht mehr den ganzen Platz ein ab Breakpoint 992px?</title>
</head>
<body>
<main>
<div class="container-flex">
<div class="container">
<h2>Warum nehmen Spalten nicht mehr den ganzen Platz ein ab Breakpoint 992px?</h2>
<h4>Erstmaliger Versuch mit srcset, sizes & calc() Bandbreite bei Bildern zu optimieren:</h4>
Die calc() Berechnungen sind nicht mehr aktuell. Das soll aber nicht das Thema sein. Ich würde gerne wissen warum es das Layout zerhaut ab 992px (ab dem 3-spaltigen Layout) in meinem Firefox (Version 69.x). Auch wundert mich, dass das Layout wieder funktioniert wenn ich im ersten calc() des ersten Bildes statt <code>calc( (1042px</code> eine deutliche größere Pixelzahl, z.B. <code>calc( (5042px</code>, schreibe. Dadurch wird das 1. Bild in der hohen Auflösung heruntergeladen.
<div class="card">
<div class="card-body border border-danger">
<div class="card-group">
<div class="row">
<div class="col-sm-6 col-lg-4 border border-danger">
<div class="card">
<img class="card-img-top" srcset="https://via.placeholder.com/640 640w,
https://via.placeholder.com/300 300w" sizes="(min-width: 1200px) calc( (1042px - (2 * 48px) - (4 * 15px)) / 3 ),
(min-width: 992px) calc( (862px - (2*48px) - (4*15px)) / 3 ),
(min-width: 768px) calc( (622px - (2*48px) - (2*15px)) / 2 ) ,
(min-width: 576px) calc( (498px - (2*20px) - (2*15px)) / 2 ),
calc(100vw - (2*20px))" src="https://via.placeholder.com/300" alt="Bild 1" />
</div>
</div>
<div class="col-sm-6 col-lg-4 border border-danger">
<div class="card">
<img class="card-img-top" srcset="https://via.placeholder.com/640 640w,
https://via.placeholder.com/300 300w" sizes="(min-width: 1200px) calc( (1042px - (2 * 48px) - (4 * 15px)) / 3 ),
(min-width: 992px) calc( (862px - (2*48px) - (4*15px)) / 3 ),
(min-width: 768px) calc( (622px - (2*48px) - (2*15px)) / 2 ) ,
(min-width: 576px) calc( (498px - (2*20px) - (2*15px)) / 2 ),
calc(100vw - (2*20px))" src="https://via.placeholder.com/300" alt="Bild 2" />
</div>
</div>
<div class="col-sm-6 col-lg-4 border border-danger">
<div class="card">
<img class="card-img-top" srcset="https://via.placeholder.com/640 640w,
https://via.placeholder.com/300 300w" sizes="(min-width: 1200px) calc( (1042px - (2 * 48px) - (4 * 15px)) / 3 ),
(min-width: 992px) calc( (862px - (2*48px) - (4*15px)) / 3 ),
(min-width: 768px) calc( (622px - (2*48px) - (2*15px)) / 2 ) ,
(min-width: 576px) calc( (498px - (2*20px) - (2*15px)) / 2 ),
calc(100vw - (2*20px))" src="https://via.placeholder.com/300" alt="Bild 3" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
-
@@Oli
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Ist dieses
shrink-to-fit=nonoch zu irgendwas gut? Ich hatte das letztens mal getestet und keine Unterschiede festgestellt:LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Weiß ich nicht. Hab's nur kopiert von der Bootstrap-Seite. Schon einige Zeit her.
-
-
@@Oli
Werde mich mal umgucken wo ich meine Quellcodes zukünftig online zugänglich machen kann.
Mach das mal. Auf Copy-and-paste-Orgie hab ich wenig Lust.
Zunächst so viel:
<body> <main> <div class="container-flex"> <div class="container">Container in Container? Das macht wohl keinen Sinn.
Außerdem: was @at sagte: schon vorhandene Elemente nutzen, nicht sinnlos
divhinzufügen. In dem Fall wohl<main class="container-flex"> <div class="card">
<h2>Warum nehmen Spalten nicht mehr den ganzen Platz ein ab Breakpoint 992px?</h2> <h4>Erstmaliger Versuch mit srcset, sizes & calc() Bandbreite bei Bildern zu optimieren:</h4>Die Überschriftenhierarchie ist falsch. Die Hauptüberschrift muss
h1sein und es darf keine Ebene ausgelassen werden:<h1>Warum nehmen Spalten nicht mehr den ganzen Platz ein ab Breakpoint 992px?</h1> <h2>Erstmaliger Versuch mit srcset, sizes & calc() Bandbreite bei Bildern zu optimieren:</h2>LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Alles richtig. Unsauber, aber meiner Meinung nicht der Grund warum das Layout ab 992 px streikt. Auch wenn ich das (ohnehin von mir falsch geschriebene) div.container-flex lösche, bleibt das Problem.
Mein größtes Hinderniss: Habe nicht den leisesten Verdacht was schief läuft. Komme mit dem Inspector auch nicht weiter. Freue mich daher über jedes Stichwort zum möglichen Grund.
-
Hab den Fehler durch genaueres Lesen der Bootstrap-Dokumentation gefunden. Das umschließende div.card-group muss weg. Es nutzt display: flex;. Die mir unbekannte Flexbox-Technologie zu mischen mit dem 12 Spalten-System von Bootstrap war der totale Griff ins Klo von mir.
Danke an Gunnar!
-
@@Oli
Die mir unbekannte Flexbox-Technologie zu mischen mit dem 12 Spalten-System von Bootstrap war der totale Griff ins Klo von mir.
Das 12-Spalten-System von Bootstrap ist Flexbox-Technologie.
Und damit zum Seitenlayouten bestenfalls zweite Wahl. CSS Grid ist die meist bessere und auch die einfacher handhabbare Technik.
Beim Seitenlayouten ist man ohne Bootstrap viel besser dran als mit.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
-
-