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

Header Image auf Mobilgeräten austauschen oder ändern

Dieses Thema im Forum "Design" wurde erstellt von lindaliebevoll, 29. März 2020.

  1. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    Hallo Leute,

    ich habe ein Problem mit der responsiven Ansicht meiner Homepage.

    Auf dem Smartphone ist das Headerbild abgeschnitten. Nun möchte ich es lediglich in der mobilen Ansicht austauschen. Ich habe schon einiges versucht u.a. diese css:

    @Media screen and (max-width: 480px){
    .site-branding {
    background: url(your image URL) center center;
    }}

    und das Verschieben der Image hat auch nicht geklappt.
    Ich denke ich habe soviele Snippets oder css Codes eingefügt, dass betreffende Lösungen negiert werden.

    Ich nutze ein Childtheme von Storefront und hier findet ihr meine HP :https://www.lindaliebevoll.de

    Villeicht kann ja einer helfen.

    Vielen Dank im Voraus.
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    769
    Zustimmungen:
    92
    Versuche mal das:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  3. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    Hammer, vielen Dank. Das hat funktioniert.
    Das Header- Image ist aber in der mobilen Ansicht nun wirklich klein.
    Gibt es da auch eine Lösung für? Daher dachte ich mir, es wäre besser ein anderes Bild für die mobile Ansicht zu verwenden.
     
    #3 lindaliebevoll, 30. März 2020
    Zuletzt bearbeitet: 30. März 2020
  4. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Füge mal folgendes im Costumizer bei Zusätzlichem CSS ein (your Image URL natürlich mit der bild URL ersetzen):
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  5. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    Großartig.
    Habe mich bestimmt 1h durch Google gesucht und einiges ausprobiert.
    Ich danke vielmals!!!!
    Perfekt und wie gewünscht!
     
  6. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Gerne doch, kein Problem :)
    Bei solchen Fragen kannst du gerne wieder auf mich zukommen ;)
     
  7. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    Na wenn das so ist :)

    Wenn ich jetzt den Menüreiter in der mobilen Ansicht anklicke, verschiebt sich das Headerlogo hinter den Text. Ich könnte damit leben, wenn es ganz nach rechts gehen würde, aber so verdeckt es den Text.
     
  8. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.302
    Zustimmungen:
    408
    ergänze mal
    background-position: top left;
     
  9. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    769
    Zustimmungen:
    92
    ... und mache vielleicht das Bild, je nach Displaybreite etwas kleiner...
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  10. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Stimmt hatte ich vergessen, dann ist das Bild richtig ausgerichtet :)
     
  11. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    Das mit dem Menü klappt schon mal. Ich musste nur 3 Klammern hinzufügen, die gefehlt haben.
    Dankeschön dafür!
    Jetzt ist das Logo ganz oben in der ecke. Kann ich da mit margin-top oä. noch nachhelfen?
     
  12. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Oh ja, sry habe ich auch gerade bemerkt, das mit Tippen von Code ist auf dem Handy nicht so einfach :D


    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Werte eben entsprechend anpassen, falls du einen einheitlichen Abstand von allen 4 Seiten des Logos aus willst, solltest du besser nur „margin“ verwenden, anstatt 4 gleiche Werte anzugeben.

    Mfg:)
     
  13. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    da ändert sich erstmal garnichts.

    ist .site-logo richtig? war ja sonst .site-header? Habe ich auch geändert, tut sich trotzdem nix.

    .custom-logo-link < soll da wieder die URL rein? Habe ich auch probiert, passiert auch nichts :)
     
  14. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    769
    Zustimmungen:
    92
    Es sollte weiterhin das background-image des Containers 'class="site-header" ' sein... und Hintergrundbilder lassen sich nicht mit margin oder padding positionieren. Lediglich das Element, in dem dieses Hintergrundbild eingebettet ist, könnte man damit beeinflussen.
    Hintergrundbilder werden mit 'background-position:' oder auch mit 'background-position-x:' und 'background-position-y:' dorthin gebracht, wo man sie hin haben will. In deinem Fall könntest du mal mit...
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    versuchen zum Erfolg zu kommen.
     
  15. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Das ist mir auch klar, aber wir wollen ja die Postion des gesamten Logo Elemis ändern und nicht nur die Poistion des Hintergrundbilds im Div des Logos...

    Probier das ganze mal so:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #15 oliver_3501, 31. März 2020
    Zuletzt bearbeitet: 31. März 2020
  16. lindaliebevoll

    Registriert seit:
    25. März 2020
    Beiträge:
    9
    Zustimmungen:
    0
    Hallo nochmal,

    Beide funktionieren halbwegs. Olivers Version verschiebt aber leider den ganzen Header so nach rechts und unten, dass die Hintergrundfarbe zum Vorschein kommt und dadurch kommt die Hintergrundfarbe in der ecke hervor.
    Sailors version klappt genauso wie gewünscht... zumindest in der mobilen Version. In der Desktopansicht ist das Image dann auch verschoben und teilweise verdeckt. Und der customizer zeigt im css "unknwon property backgroun-position.

    Könnte das Problem daher kommen, dass ich als Header ein selbst erstelle Image eingefügt habe und kein Logo? Daher kann ich durch klicker auf das Header-Bild auch nicht einen Link folgen ???
     
  17. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Dann habe ich noch ne Idee, beides mischen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  18. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.302
    Zustimmungen:
    408
    @Sailor56 Vorschlag gehört in den media-query. Dann verschiebt sich nichts am Desktop.

    Und es heißt nicht backgroun-position. Es fehlt ein "d".
    Es fehlt ein bisschen Eigeninitiative.
     
  19. oliver_3501

    oliver_3501 Well-Known Member

    Registriert seit:
    14. März 2020
    Beiträge:
    84
    Zustimmungen:
    10
    Habe ich schon gerade so geschrieben :D
     
  20. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.302
    Zustimmungen:
    408
    Habe ich gerade gelesen.
     
  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