Synchronisierung der Header-Image Position auf PC, Smartphone und Tablet

    Vorab: Da ich WP-Anfänger und auch neu im Forum bin, weiß ich nicht wie man sich in diesem Fall korrekt verhält? Zu dem folgenden Thema hatte ich bereits einen Beitrag "Anfängerfrage: Die Positionierung des Header-Images..." gepostet, nur ... kommen keine Antworten mehr!
    Nun bin zu dem Schluss gekommen, dass das wohl an der Beschaffenheit meiner Frage liegen muss und ich sie wohl besser genereller zu stellen habe!?


    1. Wie sind die üblichen (- Wenn man so sprechen kann?) Vorgehensweisen bei WordPress wenn man feststellen muss, dass der gewünschte sichtbare Ausschnitt des Header-Images z.B. auf dem Desktop stimmt, aber nicht auf der mobilen Ansicht? Siehe hier: https://jaihomahakalki.com Auf dem PC ist das Logo zentriert, auf Smartphone & Tablet nicht...
    2. Im vorherigen Beitrag wurde erwähnt
      Zitat von ptra

      Vielleicht hilft dir das weiter, wenn du es in die css für Desktops integrierst (nicht bei den Media Queries).

      - gibt es somit eine eigene css für Desktops und eine (oder gar 2?) für die mobile Ansicht? Wenn ja, wie finde ich diese?


    Danke im Voraus für die Hilfe!

    • Gerade eben
    • Anzeige

    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

    Sorry, aber ich kann dir nicht folgen! Was verstehst du unter 'zentriert'?

    ... oder anders gefragt - was ist bei diesem Screenshot nicht zentriert?
    Lade doch mal ein Bild hoch, wo du die Unzentriertheit, die du beseitigt haben willst, markiert hast.
    Oder zeigt nur mein Handy das nicht an (Samsung Galaxy)?

    Danke Dir für den Hinweis Sailor56!
    Die von mir gewünschte "Zentriertheit" bezieht sich auf den

    Zitat von Param

    sichtbare Ausschnitt des Header-Images

    . Ich habe das nun nochmal in den Screenshots hervorgehoben:
    - Bei "PC.JPG" sieht man, dass sich die Linien im Zentrum des Logos kreuzen.
    - Hingegen bei Smartphone.JPG & Tablet.JPG sie sich oberhalb des Logos kreuzen, sprich dieses nach oben rutschen müsste
    ODER
    die Seite mit dem Content erst weiter unten beginnen dürfte. (Somit entsteht die Frage: Wie beeinflusse ich ein "Herunterscrollen" der Seite nur für die Mobile Ansicht?)

    Grüße in den hohen Norden! ;-)

    Param: Ich habe deinen Beitrag gerade aus der Moderation freigeschaltet.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    kommt immer auf den Post an

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Ja - jetzt sehe ich was du meinst! 'Zentriert' hat mich nur etwas in die horizontale Verwirrung gebracht und die Vertikale habe ich übersehen.
    Auf die Schnelle fallen mir allerdings keine wirklich gute Lösungen ein - aber was du versuchen könntest, um zumindest eine Verbesserung zu erzielen, bis es eine wirklich gute Lösung gibt, wäre zB folgendes.

    Ein zweites... oder auch ein drittes Bild... mit einem etwas zugeschnittenen Himmel (also weniger Abstand Logo zum oberen Bildrand) und dieses dann je nach Displayhöhe/Breite gegen das Original austauschen. Sollte mit Mediaquery kein großes Problem sein - ist aber bestimmt Fummelkram, das richtig hinzubekommen.

    Eine weitere, vielleicht etwas einfacher umzusetzende Methode wäre, dem Element '.has-header-image .custom-header-media img' einen negativen 'margin-top: -...px;' zu geben. Und das auch wieder je nach Displaygröße mittels Mediaquery.

    ... und dann hoffen, dass vielleicht noch jemand eine bessere Idee hat.

    Das funktioniert bei dir nicht, da das Theme ab kleiner 48em den Bereich für das Custom-Header auf 75vh beschränkt. Um dem entgegen zu wirken, könnte man folgendes in "Zusätzliches CSS" schreiben:

    Code
    @media screen and (max-width: 48em) {
.has-header-image .custom-header-media img{top:-12.5vh;}
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Mach es rückgängig und schick mal über den Urzustand ein Screenshot. Ich vermute da passt es auch schon nicht.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Guten Morgen!
    Im Urzustand würde ich sagen funktioniert es besser, aber das Header-Image sitzt eben ein wenig zu tief...
    Siehe Screenshot.

    Tut mir leid. Windows Phone kenne ich nicht. Mich wundert es, dass mit einem negativen Top-Wert das Bild auch nach links wandert.

    Welches Betriebsystem hat das Lumia bzw. welchen Browser und welche Version?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Das wäre natürlich eine Variante, dass es sich um eine Eigenart beim WinPhone und Browser(IE?) handelt. Aber warum sollte der bei validem CSS Code so seltsame Dinge tun?
    Vielleicht kann man der Ursache auf den Grund gehen, wen man sich strickt an das hält, was in der style.css des Themes vorgegeben wird - dort wird offensichtlich mit 'Mobile first' und 5 weiteren MediaQueries gearbeitet, die bei größer werdenden Display wirksam werden.

    Zum testen und herausfinden der Ursache für das 'fehlerhafte' Verhalten, sollte man sich - denke ich - zunächst mal an diesem Schema orientieren.

    Welche Formatierung und welche Maßeinheit letztlich wirksam ist und zufriedenstellend funktioniert muss man ausprobieren - ich habe es mal mit margin-top und Pixel probiert, weil das bei mir (am PC) und den FF Webentwicklertools am besten funktioniert!

    Wenn das Problem nur auf dem Lumia auftritt, wäre es nicht so wild! Leider habe ich gerade kein Android greifbar um zu checken ob es da genauso ist?

    Es handelt sich um Windows 10 Mobile - Version 1607
    Der Browser war der Microsoft Edge - Version kann ich leider gerade nicht herausfinden...aber, wenn es entscheidend ist, suche ich weiter.

    Probiere ich es mit dem SURFY oder UC Browser schaut es bei diesen beiden identisch aus. Ich füge nochmal alle Screenshots an. Es wird ersichtlich, dass alle Probleme mit der "neuen" Version haben. Jedoch mit der ursprünglichen der MS EDGE am besten gearbeitet hat.

    Danke für Deine Mühe!!!

    Mach mal meinen vorherigen Vorschlag rückgängig und versuche es damit:

    Code
    @media screen and (max-width: 48em){
.has-header-image .custom-header-media img {
    min-height: unset;
    height: 75vh;
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    ok, dann könnte er min-height: 0; schreiben.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Also: Erstmal danke an alle Hilfestellungen!

    Sailor56: Verwende ich:

    Zitat

    .has-header-image .custom-header-media img {
    margin-top: -60px;
    }


    oder

    Zitat

    Media screen and ( min-width: 20em ) {
    .has-header-image .custom-header-media img {
    margin-top: -50px;
    }
    }


    schaut es auf dem Smartphone mit dem EDGE perfekt aus! (SURFY und UC Browser zeigen keine Änderung auf die Maßnahmen.) Aber leider gibt es nun am PC am unteren Bildrand einen Balken. (a.jpg) Dieser verschwindet wenn man

    Zitat

    Media screen and ( min-width: 79em ) {
    .has-header-image .custom-header-media img {
    margin-top: 0px;
    }
    }

    verwendet, ABER dann passt es wieder nicht mehr auf dem Smartphone: Das Logo sitzt zu tief.

    SirEctor: Verwende ich deinen Vorschlag (mit "min-height: 0;") erscheint der Balken auf dem Smartphone oberhalb.(b.jpg) (Übringens reagieren hier alle 3 mobilen Browser gleich.)
    Ich habe versucht mit "height:" zu spielen, aber bei größerem Wert wird zwar der Balken kleiner, aber es rutscht das Logo wieder unten raus...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden