Responsiver Headerbereich

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.

Zitat von threadi

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

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:

Zitat von meisterleise

Bin nicht sicher, was du meinst. Möchtest du diesen Papierabriss verkleinern oder möchtest du das Blumenbild zentrieren oder…?

Hallo :)

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

Zitat von r23

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

Dankeschön :)

Zitat von meisterleise

Dankeschön heißt Problem gelöst?

Nein :oops: nicht wirklich.
Eher ein Dankeschön für die Hilfe.

Ich teste es heute Abend nochmal aus. :)

Zitat von meisterleise

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

.header_bild {
        background-position: center top;
    }

Oder wenn du es nur für bestimmte Screens positionieren möchtest:

Code

@media only screen and (max-width: 600px) {
    .header_bild {
        background-position: center top;
    }
}

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.

Ich habe den Code eben ausprobiert. Er funktioniert.
Auch auf dem Handy sieht es super aus. :) Dankeschön dafür.

Zitat von r23

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

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