• Hallo zusammen. Danke das es euch gibt!

    Ich habe bei zwei WordPress exakt die gleichen Einstellungen im Thema Twenty Twenty-One nur die Header Logo Grösse ist unterschiedlich. … da muss aber noch ein Unterschied sein, den ich nicht finde!

    Mein Problem ist, dass das Header Seiten Logo auf einer Seite in der Breite der Webseite angezeigt wird und in der anderen die volle Breite angezeigt wird.

    Ich hatte vor einiger Zeit vom Support den CSS Code bekommen, der so weit funktioniert und ist auf beiden Seiten identisch.

    img { max-width: 100%; height: auto; } #af-wrapper #forum-navigation a, #af-wrapper #forum-navigation-mobile a { color: #000000 !important; } #masthead-wrapper { background-size: contain; }

    Ich habe auch alle Optionen im Customizer im Header exakt verglichen und keine Unterschiede gefunden, ausser das fehlerhafte Bild transparent und etwas kleiner ist.

    Wie bekomme ich das hin, dass die Logobreite nur so breit angezeigt wird wie die eigentliche Seite ist? (Siehe Screenshot abmahnungen-schweiz)

    Danke für eine Unterstützung, damit ich weiter entwickeln kann.

    Gruss Klaus Wilde

    fauxpas-blog.png

    abmahnungen-schweiz.png

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Mein Problem ist, dass das Header Seiten Logo auf einer Seite in der Breite der Webseite angezeigt wird und in der anderen die volle Breite angezeigt wird.

    Wenn ich dich richtig verstehe, meinst du mit https://fau...log.com/ (Domain anonymisiert) die Website, bei der das Logo nur die Inhaltsbreite einnimmt? Und https://abm...eiz.ch/ (Domain anonymisiert) wäre die Website bei der … das Logo etwas kleiner angezeigt wird? Von „voller Breite“ kann da keine Rede sein. So wie in deinem Screenshot sieht die Seite in meinem Browser nicht aus.

    Noch rasch ein freundlicher Hinweis bezüglich CSS: du bekommst WordPress und die Themes und Plugins im WordPress-Verzeichnis bereits kostenlos (und so, wie sie sind) zur Verfügung gestellt und wenn sich bei der Anwendung Probleme ergeben, stehen wir gerne kostenlos mit Tipps zur Seite. Wir nehmen aber nicht auf Zuruf Änderungen vor und können auch keine Grundlagen in CSS, HTML, PHP, JavaScript usw. vermitteln, weil das hier den Rahmen einer ehrenamtlichen Hilfe sprengen würde.
    Gelegentlich (und immer ohne einen daraus abzuleitenden Anspruch) helfen wir schon mal mit CSS-Regeln aus, wenn wir für die betreffenden Websites die URL kennen und sich die Regel mit wenig Aufwand ableiten lässt.

    Obwohl wir hier wie gesagt keine Grundlagen vermitteln wollen, noch rasch ein Kommentar zum von dir geteilten CSS:

    img { max-width: 100%; height: auto; }

    bedeutet, dass jedes Bild das in die Website eingefügt wird (also auch in Beiträgen und Seiten) eine maximale Größe von 100% des umgebenden Containers erhält. Unter Umständen ändert sich durch diese Regel an Bildern gar nichts, weil sie sowieso kleiner sind, als der umgebende Container. Ausgenommen von dieser Regel sind Hintergrundbilder, die mit einer CSS-Regel festgelegt werden, wie bei deinen Websites der Hintergrund des Headers. Hier greift die Regel grundsätzlich nicht.

    #af-wrapper #forum-navigation a, 
    #af-wrapper #forum-navigation-mobile a {
    color: #000000 !important; }

    … ist eine CSS-Regel, um Links in schwarz auszugeben. Die Verwendung von !important sollte immer als eine Notlösung angesehen werden, weil es sich nicht so leicht von anderen CSS-Regel überschreiben lässt. Auf deine Bild-Hintergründe im Header hat das überhaupt keinen Einfluss.

    #masthead-wrapper { background-size: contain; }

    … legt fest, dass das Hintergrundbild in den Block des Masthead-Wrappers eingepasst werden soll. Dabei wird aber auch die Höhe des Wrappers berücksichtigt. Die Beispiele auf https://developer.mozilla.org/en-US/docs/Web/CSS/background-size verdeutlichen das sehr schön.

    Grundsätzlich sind die Header selten so gedacht, dass sie ein Banner in einer fixen Abmessung beinhalten, weil es dann sehr schwierig wird mit dem responsive Design auf mobilen Endgeräten. Auf einem 27″-Monitor sieht ein auf Inhaltsbreite hochskaliertes Headerbild auch sehr komisch (und außerdem durch die Skalierung sehr unscharf) aus. Du solltest dir zur Gestaltung etwas anderes einfallen lassen, um die Schrifzüge zu platzieren.

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)