nicht angemeldet
Beim Versuch meinen Webseiten Smartphoneschlauch für breitere viewports durch das Aufteilen in Spalten anzupassen stoße ich auf das Problem, dass alle Elemente in der dafür bestimmten grid-area angezeigt werden (Ausrichtung wäre der nächste Schritt), bis auf eines: Meine svg-Graphik (im Smartphoneschlauch 98% der Breite füllend) schrumpft hier auf fast nicht auffindbare 4x4px zusammen. Vermutlich sind das einfach die vier Ecken. Im Quellcode wurde zunächst nichts ausser der Definition für die grid-area innerhalb einer @media-query hinzugefügt.
Im Inspector habe ich nun herausgefunden, dass die betreffende grid-area irgendwoher (nicht von mir UND nicht vom Browser) zwangsweise einen min-width Wert von "0" bekommt, ebenso für min-height.
Setzte ich diesen Wert auf 100%, wird die svg-Graphik in der gewünschten Größe angezeigt, auto funktioniert nicht.
Ich habe dazu etwas im wiki gesucht und gegooglet, aber schlau bin ich da nicht geworden. Mir schien die ein oder andere gefundene Problembeschreibung darauf hinzudeuten, dass grid und svg nicht notwendigerweise harmonieren und dafür Handarbeit angesagt ist. Merkwürdigerweise war das Setzen von min-width und min-height auf "0" in anderen Fällen die Lösung, bei mir war es das Problem, was mir noch weniger gefällt. Nur "min-width: 100%;" klingt irgendwie auch nicht wirklich richtig, auch wenn es in diesem Fall "funktioniert".
Der langen Rede kurzer Sinn: gibt es für das Einbinden von svg in Grid sowas wie eine "beste und meist funktionierende" Praxis?
Gruß
M
Gunnar Bittersmann