1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von Param, 15. Januar 2018.

  1. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    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
      - 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!
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Sorry, aber ich kann dir nicht folgen! Was verstehst du unter 'zentriert'?
    Screenshot_2018-01-15-19-47-33.jpg
    ... 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)?
     
  3. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    Danke Dir für den Hinweis Sailor56!
    Die von mir gewünschte "Zentriertheit" bezieht sich auf den
    . 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! ;)
     

    Anhänge:

  4. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    @Param: Ich habe deinen Beitrag gerade aus der Moderation freigeschaltet.
     
  5. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    @maxe: Danke dir! Ich war schon am verzweifeln! Sprich jetzt kann ich wieder "normal" posten, ohne Verzögerung von mehreren Stunden?
     
  6. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    Ja! :) Schaut gut aus!
     
  7. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    kommt immer auf den Post an
     
  8. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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.
     
  9. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  10. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    @SirEctor: Vielen, vielen Dank für die Hilfe!!! Funktioniert auf Anhieb perfekt!:)

    Anders wäre ich wahrscheinlich erfolglos bis tief in die Nacht gesessen!
     
  11. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    @SirEctor: Leider muss ich revidieren: Ich hatte die Kalibrierung nur über den Admin-Bereich geprüft und jetzt erst mit dem Smartphone (Lumia-Windowsphone) und dort funktioniert es leider nicht. Siehe Screenshot.
     

    Anhänge:

  12. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Mach es rückgängig und schick mal über den Urzustand ein Screenshot. Ich vermute da passt es auch schon nicht.
     
  13. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    Guten Morgen!
    Im Urzustand würde ich sagen funktioniert es besser, aber das Header-Image sitzt eben ein wenig zu tief...
    Siehe Screenshot. wp_ss_20180117_0001.JPG
     
  14. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    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?
     
  15. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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!
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  16. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    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!!!
     

    Anhänge:

  17. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Mach mal meinen vorherigen Vorschlag rückgängig und versuche es damit:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  18. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
  19. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    ok, dann könnte er min-height: 0; schreiben.
     
  20. Param

    Param Active Member

    Registriert seit:
    12. Januar 2018
    Beiträge:
    27
    Zustimmungen:
    0
    Also: Erstmal danke an alle Hilfestellungen!

    @Sailor56: Verwende ich:
    oder

    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
    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...
     

    Anhänge:

    • a.jpg
      a.jpg
      Dateigröße:
      91,5 KB
      Aufrufe:
      3
    • b.JPG
      b.JPG
      Dateigröße:
      48,9 KB
      Aufrufe:
      3
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden