SVG Wordpress auf kleinen Bildschrimen viel zu groß

[Segelflugpilot]

Guten Abend zusammen,
ich bastle gerade ans Anfänger an einer neuen Website für die Firma rum.
Ich kenne mich ein bisschen aus mit Wordpress, aber offenbar nicht genug mit SVG und Wordpress.
Ich möchte Icos, bzw. in dem Fall Vektorgrafiken verwenden, da diese leicht sind und immer gut aussehen. Nur leider sieht es auf dem Desktop auch gut aus, Mobile sind sie allerdings riesig. Ich vermute, dass es an den festgelegten Werten für die Höhe und Breite in der SVG Datei liegt, aber ändere ich die, verändert sich logischerweise alles. Wie ich die umändere in viewBox habe ich noch nicht herausgefunden. Selbst mit "100%" als Wert würde Wordpress die ja an die Größe des umgebenden Containers anpassen und das ist eben viel zu groß.
Bitte schaut euch den Salat selbst an. Es geht um den Bereich Rechtsgebiete.
https://neu.anwalt-verden.de/
Kann mir da wer helfen? Ist bestimmt einfach, aber bei Google gebe ich anscheinend falsche Suchbegriffe ein und finde nichts passendes.

Edit: Verdammt im Thema Programmieren wäre es besser aufgehoben... @Lawnmower Bitte verschieben. Shame on me

 

[Midnight Sun]

Inline-CSS ist bei den Thumbnails vorhanden und nachschauen was WP bei den Klassen hinterlegt:

<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:15% auto">
<figure class="wp-block-media-text__media">
<img decoding="async" width="47" height="47" src="ht tps://domain.xyz/Erbe.svg" alt="" class="wp-image-150 size-full"/>
</figure>
<div class="wp-block-media-text__content">
<h3 class="wp-block-heading">Erbrecht</h3>
</div>
</div>

 

[Segelflugpilot]

Okay auch da bin ich wohl noch Anfänger. Wie schaue ich nach was WordPress bei der Klasse hinterlegt hat?
Kannst du mir bitte das etwas weiter aufschlüsseln zwischen inline css und dem Zusammenhang mit der WordPress Klasse?

 

[Midnight Sun]

Im Firefox drückst du F11 und bekommst den Brower im Vollbild zu sehen.
Das erleichter mir zumindest die nun folgende Übersicht.
Mit F12 öffnest du die "Werkzeuge für Web-Entwickler" (welche du sonst über "Extras > Brower-Werkzeuge" finden kannst.
- Durch erneutes drücken der F-Tasten schließt bzw. minimierst du die Ansicht wieder.

Wenn du jetzt bei "HTML durchsuchen" schaust, siehst du da quasi den Quelltext.
Hier gehst du mit der Mouse Zeile für Zeile durch (nur drüberfahren) und bekommst oben auf der Website die Bereich markiert, dort wo du dich gerade befindest.

Navigiere hier bis zum Bereich "Unsere Rechtsgebiete" oder dort hin, wo du meinst: "hier passt etwas nicht".
Du kannst dann nachsehen, welcher div mit welcher ID oder class oder was da für ein HTML Element verwendet wird, über welche CSS-Anweisung wie gestaltet wird.

Je nach WordPress Theme (bei nicht-WordPress Seiten auch) kann je nach Auflösung eine andere CSS-Datei geladen werden. Du musst also ggf. mit der Auflösung etwas spielen oder gehst direkt zu einer Browsergröße, wo du ein Problem festgestellt hast oder "wo sich ein visuelles Element" der Seite verändert (Farbe, Form etc.).

Auf der rechten Seite hast du dann mehrere Felder du die CSS-Anweisungen "je Element" angezeigt werden.
Die kann bzw. sollte man dann eine Veränderung sehen oder die Angaben zu den Thumbnails finden.


Eine direkte Lösung kann ich dir an dieser Stelle nicht liefern.
Ich hoffe allerdings das du damit erst einmal klar kommst.

 

[Segelflugpilot]

Erst einmal vielen Dank für deine Hilfe!
Über den Entwicklertools teste ich immer die Anzeige bei kleineren Bildschirmen, das kenne ich daher schon gut.
Das habe ich rausgefunden:

Spoiler: Code

Das bekomme ich zum Bild angezeigt<img decoding="async" width="512" height="512" src="https://neu.anwalt-verden.de/wp-content/uploads/2023/12/Arbeiter.svg" alt="" class="wp-image-147 size-full">

und das ist der Container:
div.wp-block-media-text.is-stacked-on-mobile figure.wp-block-media-text__media img.wp-image-147.size-full

Mit HTML und CSS kenne ich mich nur sehr wenig aus. Kann es am "size-full" liegen? Aber wie ich das ändere weiß ich nicht. Welches CSS dafür verwendet wird kann ich irgendwie auch nicht herausfinden. Eine ID oder ähnliches sehe ich nicht.
Die SVGs bekommen häufig die Größe 512 zugewiesen, aber es gibt auch welche mit 30 oder 47. Daran kann es also nicht liegen.