Zentriertes, responsive Logo

mikashingu

Hallo Zusammen,

ich nutze Elementor Pro und OceanWP und habe ein Problem mit dem Logo. Mein Header ist zentriert mit Logo in der Mitte. Links und rechts je 1 NavMenu.

Jedesmal, wenn ich den Bildschirm zusammenschiebe, verkleinert sich das Logo entsprechend und umgekehrt. Ich habe versucht, mit max-width: 100% und width: 460px des Elementor Containers entgegenzuwirken. Das klappt zum Teil...wenn ich die width weiter runterfahre, dann geht es zwar (100px), aber das Logo ist Mini.

Jemand zufällig eine Idee, wie ich das Logo über die gesamte Browserverschiebung gleich gross lasse? Ich verzweifel...überall gehts, ich kanns nicht :(
Gruss
Mika

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Zitat von mikashingu

Ich verzweifel...

... neee... wir verzweifeln :(.... wir soll man dir helfen, wenn du uns nicht schauen lässt, wo das Problem ist?
Ein Link zur Seite würde helfen!

mikashingu

die Seite ist noch nicht online...
aber hier ein Beispiel einer Seite von einer Freundin...http://www.keepyourflowers.de/
da bleibt das Logo schön mittig und gleich gross. Wie geht das :)
Sie kann ich nicht fragen = hat "nur" ein Template benutzt.
Ich denke, vllt muss ich die height auf minimum setzen?

SEpp55

Das bleibt NICHT gleich groß!! Bei 550px ist Schluß mit gleich groß, weniger Breite -> viel kleiner!!!

Steht auch so in den CSS:

Code

#logo img {
 max-height: 205px
}

bis max.549px

Code

#logo img {
    max-height: 70px;
}

Sailor56

Dann schau dir mal den Quellcode der Seite an... mit dem Webentwickler Tool 'Inspector' (hat jeder Browser), dort wirst du sehen, dass auf der Beispielseite ein äußerer Container als FlexBox definiert wird...

Code

.flex-row {
    -js-display: flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}

Alles anzeigen

In dem sind dann 3 Container enthalten - das Logo in der Mitte.
Das Bild wird dann mit

Code

max-height

auf die gewünschte Größe 'gezwungen'... das Originalbild ist deutlich größer.
Die Verkleinerung des Bild bei kleinem Bildschirm wir dann mit einer MediQuery umgesetzt.

mikashingu

so...mit max-width hab ich es jetzt hinbekommen. Warum auch immer ich mich an max-height geklammert habe...jetzt geht es.
Danke für die Hilfe...ihr habt mich auf die richtige Idee gebracht :)

mikashingu

ok, ich habe es nicht hinbekommen. In Mobile und Tablet view siehts dann grausam aus.
Mein Problem im Moment:
Ich habe ein Menu mit 4 Bereichen. Links Menu mit 30%, dann das Logo mit 40%, My Account mit 20% und den Warenkorb mit 10%.
Wähle ich "full width" aus, ist es nicht full width sondern, sobald ich das Browserfenster extrem gross mache, gibt es rechts und links einen Abstand...ok, das geht.
Stelle ich auf Full Width und Stretch (Stretch the section to the full width of the page using JS), dann hab ich zwar die volle Breite, aber alles von rechts schiebt sich zusammen, dh die Abstande zwischen "My Account" und dem Cart Button werden kleiner.

No matter what...das Logo schiebt sich immer zusammen. Stell ich es auf max-width: 400px, dann bleibt es erstmal gleich gross. Aber in Tablet und Mobile View ist das Logo nicht mehr mittig.

Also ich raff es nicht...max-height funktioniert irgendwie auch nicht. I am dumm...

mikashingu

ok, ich habs hinbekommen...
Neues Logo, max und min width und alles wurde gut
Vielen Dank nochmal :) Ihr habt den Weg geebnet...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Zentriertes, responsive Logo

Jetzt mitmachen!