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

Responsiver Headerbereich

Dieses Thema im Forum "Design" wurde erstellt von Foxi, 29. Juli 2023.

  1. Foxi

    Foxi Well-Known Member

    Registriert seit:
    8. Juni 2020
    Beiträge:
    105
    Zustimmungen:
    3
    Hallöchen,

    ich habe wieder etwas am Theme gebastelt. Es ist jetzt genauso wie ich es haben wollte. :)
    Allerdings weiß ich grad nicht wie ich den gesamten Headerbereich responsiv mache.

    Die 3 Bilder unter dem Header, habe ich für Handy und Tablet ausgeblendet. Der Header soll sich aber verkleinern, so das man ihn komplett auf dem Handy sieht. (nur halt in klein)

    Gibt es da eine spezielle Seite (Generator), wo man den fertigen Code rausbekommt?

    Es geht um meinen Blog unter: https://myheartfeels.de

    Vielen Dank schonmal.
     
  2. threadi

    threadi Well-Known Member

    Registriert seit:
    9. Oktober 2020
    Beiträge:
    2.097
    Zustimmungen:
    418
    Welche Möglichkeiten du hast das Aussehen deiner Seite zu beeinflussen hängt primär von dem von dir genutzten Theme ab. Es gibt keine "fertigen Codes" für irgendetwas. Das ist alles immer sehr individuell.

    Das von dir genutzte Theme Adoxa scheint ein kommerzielles Theme gewesen zu sein, welches inzwischen gar nicht mehr angeboten wird: https://themeforest.net/item/adoxa-wordpress-blog-theme/20240294 - eventuell solltest Du dir ein anderes Theme suchen, welches deinen Ansprüchen genügt. Ja, du müsstest dann vermutliche vieles vom Layout her neu konfigurieren, aber du hättest dann auch sicherlich mehr Möglichkeiten in der responsiven Gestaltung.
     
  3. Foxi

    Foxi Well-Known Member

    Registriert seit:
    8. Juni 2020
    Beiträge:
    105
    Zustimmungen:
    3
    Das Theme habe ich tatsächlich mal gekauft und habe es dann nach meinen Geschmack umgestaltet :)
    Allerdings wollte ich in nächster Zeit kein neues Theme besorgen.

    Am Theme selbst kann ich alles verändern, das Problem ist eher die fehlende CSS.
    Ich wusste mal wie man sowas fürs Handy / Tablet verkleinert, aber ich hatte echt lange Pause beim Bloggen.

    Daher fällt es mir aktuell nicht mehr ein :oops:
     
  4. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    1.351
    Zustimmungen:
    345
    Bin nicht sicher, was du meinst. Möchtest du diesen Papierabriss verkleinern oder möchtest du das Blumenbild zentrieren oder…?
     
  5. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.396
    Zustimmungen:
    599

    du könntest

    verwende das Attribut display: flex für den Header-Container.
    verwende das Attribut flex-direction: row, um die Elemente im Header in einer Reihe anzuordnen.
    verwende das Attribut flex-wrap: wrap, um die Elemente im Header umzubrechen, wenn sie nicht in einer Reihe passen.
    verwende die Attribute flex-grow und flex-shrink, um die Größe der Elemente im Header zu steuern.
    verwende das Attribut min-width, um die Mindestbreite der Elemente im Header festzulegen.

    https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
     
  6. Foxi

    Foxi Well-Known Member

    Registriert seit:
    8. Juni 2020
    Beiträge:
    105
    Zustimmungen:
    3
    Hallo :)

    Das Blumenbild meine ich :)
    Das Zitat selbst, ist auf dem Handy mittig. Da brauch ich nichts mehr ändern.


    Dankeschön :)
     
  7. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    1.351
    Zustimmungen:
    345
    Dankeschön heißt Problem gelöst?
     
  8. Foxi

    Foxi Well-Known Member

    Registriert seit:
    8. Juni 2020
    Beiträge:
    105
    Zustimmungen:
    3
    Nein :oops: nicht wirklich.
    Eher ein Dankeschön für die Hilfe.

    Ich teste es heute Abend nochmal aus. :)
     
  9. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    1.351
    Zustimmungen:
    345
    Okay. :D Ich persönlich glaube nicht, dass du den Header auf flex umgebaut bekommst. Ich würde einfach das background image neu positionieren:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Oder wenn du es nur für bestimmte Screens positionieren möchtest:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die 600px stehen für die Screenbreite, ab der du das Headerbild anders platzieren möchtest.
    Statt "center" könntest du auch einen gewünschten Prozentwert eingeben, negativ oder positiv, bspw. 20%, um den gewünschten Ausschnitt noch besser zu steuern.
     
  10. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.396
    Zustimmungen:
    599
    Flexbox ist eine CSS-Technik, die es dir ermöglicht, Elemente flexibel anzuordnen und auszurichten, unabhängig von ihrer Größe oder Anzahl. Mit Flexbox kannst du zum Beispiel Spalten, Raster oder Navigationen erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen.

    Media Queries sind eine andere CSS-Technik, die es dir ermöglicht, verschiedene Stile für verschiedene Geräte oder Bildschirmbreiten zu definieren. Mit Media Queries kannst du zum Beispiel das Layout, die Schriftgröße oder die Farbe deiner Webseite je nach Gerätetyp oder Bildschirmauflösung ändern

    CSS Flexbox Responsive
    Media Queries für Einsteiger
    Responsive Design: CSS Flexbox und Media Queries
     
  11. Foxi

    Foxi Well-Known Member

    Registriert seit:
    8. Juni 2020
    Beiträge:
    105
    Zustimmungen:
    3
    Ich habe den Code eben ausprobiert. Er funktioniert.
    Auch auf dem Handy sieht es super aus. :) Dankeschön dafür.


    Ich kenne persönlich nur Media Queries .. :oops:
    Bzw von Flexbox habe ich schon gehört, aber noch nie benutzt.:eek:
     
  12. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.396
    Zustimmungen:
    599
    Es kann nie zu spät sein, Sinnvolles zu verwenden und zu lernen... für EIN Blumenbild aber sicherlich nicht...
     
    Foxi gefällt das.
  13. Hier ist ja wohl nicht die Jobbörse. Wieso melden sich hier die Helferlein?
     
  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