Website Logo wird in mobiler Ansicht gequetscht dargestellt

[Naturenergie]

Guten Tag liebe Ratgebende,

ich wurde vom Wordpress-Forum hierher verwiesen, weil es sich bei meinem Problem nicht um eine reine Wordpress-Thematik handelt, sondern CSS betrifft.

Und zwar wird unser Firmenlogo in der Desktopansicht wie gewünscht dargestellt, in der mobilen Ansicht ist es jedoch gequetscht.
Ich habe nun versucht mit dem folgenden Code, welchen ich in die zusätzlichen CSS eingesetzt habe, entgegenzuwirken. Allerdings ohne den gewünschten Erfolg.

.site-logo-div img {
height: 124px;
width: 239px;
}

Mobile Ansicht:

https://imgur.com/oSXeHIK

Desktopansicht:

https://imgur.com/n4kw4vS

Kann mir vielleicht jemand helfen und den korrekten Code nennen, sodass ich das Logo in der mobilen Ansicht auch vernünftig anzeigen lassen kann?

Vielen lieben Dank im Voraus und beste Grüße

 

[Sempervivum]

Guten Morgen und willkommen im Forum,
ohne die fragliche Seite einsehen zu können, kann man da nur mutmaßen:
Vermutung 1: Es gibt ein anderes CSS, dass höher spezifisch ist und deines überschreibt.
Vermutung 2: Der Selektor passt nicht.
Poste am besten die URL dieser Seite, damit man es sich ansehen kann. Ich habe sie zwar mit Google gefunden und dort ist das Logo auf meinem Handy nicht verzerrt. aber es könnte sein, dass Du sie in Arbeit hast und der Stand unter naturenergiedach.de nicht der aktuelle ist.

 

[Naturenergie]

Guten Morgen und vielen Dank für die Willkommens-Grüße!

Ich denke, dass Du via Google auf die "alte" Seite gestoßen bist, da diese noch aktiv ist.
Die neue erstelle ich auf einer Testinstanz. Hier der Link dahin: http://s336278115.online.de/

Vielen Dank im Voraus für Deine Unterstützung!

 

[Sempervivum]

Versuche folgendes CSS:

Für den rechten Container mit dem Hamburger-Item darin:

.header-right-wrapper {
    flex: 1;
}

Für das Bild alle Größenangaben entfernen und min-height auf 0 setzen um das Schrumpfen der Höhe zu ermöglichen:

.site-logo-div img {
    /* height: 124px; */
    /* width: auto; */
    min-height: 0;
}

Dann wird die Höhe des Bildes durch die width- und height-Attribute fest gelegt und ggf. geschrumpft.
Falls es dir dann zu groß ist, kannst Du die Höhe festlegen, aber mit max-height um ein Schrumpfen zu ermöglichen:

.site-logo-div img {
    max-height: 124px;
    width: auto;
    min-height: 0;
}