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-Img auf mobiler Seite anzeigen

Dieses Thema im Forum "Design" wurde erstellt von dachvomfach, 4. November 2018.

  1. dachvomfach

    dachvomfach Member

    Registriert seit:
    23. Juli 2015
    Beiträge:
    12
    Zustimmungen:
    0
    Hallo, vermutlich eine Idiotenfrage, dennoch wäre ich dankbar für Eure Hilfe:
    Ich arbeite mit Theme Thwenty Thirteen und das Headerbild wird bei Mobiler Ansicht nicht angezeigt, da zu groß oder so. Was muss ich tun, damit ich es dennoch einblenden kann?
    Kleiner hochladen uns dann? Im Script was ändern?
    1000 Dank im Voraus
    Katja
    http://www.kinderstube-kunterbunt.de
     
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Also bei mir wird das Headerbild in der Mobilansicht angezeigt!
     
  3. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Ja... wird auch bei mir angezeigt! Aber ist wohl trotzdem (meine Meinung nach) so nicht ganz ideal.
    Die Anzeige springt beim Verkleinern der Anzeige und mal wird das Headerbild abgeschnitten oder es entsteht unterhalb ein optisch 'unschöner' Leerraum. Dieser Effekt wird wahrscheinlich durch die im CSS (inline) eingefügten MediaQueries ausgelöst.
    Mit folgenden Änderungen im CSS könnte man die Funktion und das Erscheinungsbild (responsiv) etwas optimieren.
    1. Deaktiviere (auskommentieren) folgende Zeilen in deinem Inline-CSS
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Also alles weg, was zwischen den /*.... */ steht! Und in der ersten Anweisung den Wert für 'background-size: 100% auto;' einstellen.

    2. Deaktiviere (auskommentieren) folgende Zeilen in deinem Inline-CSS
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    also wieder alles zwischen den /*... */ unwirksam machen.

    3. Füge folgenden Code in das zusätzliche CSS ein. (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die Idee hinter dieser Änderung:
    Hintergrundbilder belegen keinen Platz - eingefügt in zB in ein <div> führen sie nicht dazu, dass sich dieses div in der Größe anpasst... es ist ja kein Inhalt im div, sondern nur ein Hintergrund In dem betroffenen <header id="masthead" class="site-header" role="banner"> befindet sich jedoch 'Inhalt' den man nutzen kann, um genau den Platz zu schaffen, den das Bild braucht - das Element .site-header .home-link.
    Das Bild hat die Dimensionen 1600px * 230px - ist also ~ 6.99 mal breiter als hoch. Diesen Wert kann man mit 'calc' nutzen, um responsiv die benötigte Höhe zu berechnen.

    Einfach versuchen, ob das klappt...wenn nicht, einfach die Änderungen wieder rückgängig machen.
     
  4. FloRet

    FloRet Well-Known Member

    Registriert seit:
    20. September 2016
    Beiträge:
    1.197
    Zustimmungen:
    91
    Des Weiteren noch ein Hinweis:

    Auf der Team-Seite, werden die Bilder noch via http geladen und müssten auf https geändert werden.

    LG
     
  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