[phpBB3] Header anpassen

URL-Adresse des Forums:https://dawnofanewday.forumieren.com/
Rang/Funktion im Forum:Admin
Forenversion:phpBB3
Browser: Firefox
Persönliches CSS(Ja/Nein): Ja
Templateänderungen(Ja/Nein): Ja

Hallo!

Ich habe gestern an einem neuen Header gearbeitet und alles hat auch soweit bereits geklappt. Nun ist allerdings aufgefallen, dass der Header sich noch nicht an verschiedene Browser bzw. Bildschirmauflösungen anpasst, was natürlich nachteilig ist. Bei mir sieht in Firefox alles normal aus, bei Usern mit kleineren Bildschirmen fällt das bei gleichem Browser aber auch geringfügig anders aus.

Ich habe bei der Suchfunktion das hier gefunden: https://hilfe.forumieren.com/t38117-phpbb3-ubergrosses-logo-des-forums-an-desktopauflosung-anpassen?highlight=Bildschirmaufl%F6sungen+anpassen

Nachdem ich es allerdings in das CSS Sheet eingegeben habe, hat sich nichts für die betroffenen User verändert. Ich habe ebenfalls diese Antwort gefunden: https://hilfe.forumieren.com/t17617-header-verschiedene-monitorauflosungen?highlight=header

Aber auch die hat nicht geholfen. Gibt es noch eine andere Möglichkeit, dass sich der Header automatisch immer anpasst, ohne dass das Gesamtbild verzerrt/verschoben wird?

Über Hilfe wäre ich sehr dankbar!

LG

Hallo @TribeSpirit.

Haben die betroffenen User Cache und Kekse gelöscht und das Forum neu aufgerufen?
Ggf. den DNS-Cache löschen und danach nichmal neu aufrufen.

Wie der DNS Cache gesäuber wird, findest du im folgenden Link.

https://hilfe.forumieren.com/t30234-dns-cache-loschen-forum-nicht-aufzurufen?highlight=DNS+Cache


Herzliche Grüße
Kupke

Guten Abend Kupke!

Vielen Dank für deine Antwort. Ich habe die Userschaft mal gefragt und es zeigt sich leider keine Änderung, egal ob am Pc oder in der mobilen Version (wobei ich nichts dazu gefunden habe, ob die CSS Codes auch helfen, dass sich ein Banner an die dortige Bildschirmgröße anpasst). Ich hatte ihnen weiter gegeben, dass sie, ehe sie ihre Rückmeldung gaben, vorher nochmal Cache, Cookies und DNS Cache leeren sollten.

Vielen danke für deine Rückmeldung.
Ich persönlich gehe von einem lokalen Browserproblem aus denn wäre es ein Problem im Script, wären alle Mitglieder in deinem Forum betroffen.
Ich bin bis mitte der Woche leider nur mit meinem Smartphone online und kann die Scripts deshalb momentan nicht nachstellen.

Ggf. meldet sich Joost nochmal zu diesem Anliegen ansonst teste ich die Scripts selbst nochmal aus aber leider erst mitte kommender Woche.

Herzliche Grüße
Kupke

Alles klar, dann warte ich auf eine weitere Rückmeldung

Hallo @TribeSpirit,

Nachdem ich es allerdings in das CSS Sheet eingegeben habe, hat sich nichts für die betroffenen User verändert. Ich habe ebenfalls diese Antwort gefunden: https://hilfe.forumieren.com/t17617-header-verschiedene-monitorauflosungen?highlight=header

Sie verwenden einen benutzerdefinierten Header. Verwenden Sie daher diesen Code:

Code:

.bfheader1 img {
  max-width: 100%;
}

pedxz schrieb:Hallo @TribeSpirit,

Nachdem ich es allerdings in das CSS Sheet eingegeben habe, hat sich nichts für die betroffenen User verändert. Ich habe ebenfalls diese Antwort gefunden: https://hilfe.forumieren.com/t17617-header-verschiedene-monitorauflosungen?highlight=header

Sie verwenden einen benutzerdefinierten Header. Verwenden Sie daher diesen Code:

Code:

.bfheader1 img {
  max-width: 100%;
}

Vielen Dank @pedxz !

pedxz schrieb:Hallo @TribeSpirit,

Nachdem ich es allerdings in das CSS Sheet eingegeben habe, hat sich nichts für die betroffenen User verändert. Ich habe ebenfalls diese Antwort gefunden: https://hilfe.forumieren.com/t17617-header-verschiedene-monitorauflosungen?highlight=header

Sie verwenden einen benutzerdefinierten Header. Verwenden Sie daher diesen Code:

Code:

.bfheader1 img {
  max-width: 100%;
}

Hallo pedxz!

Danke für den Hinweis mit dem veränderten Code Sollte dieser Code dann auch funktionieren, wenn man vom Handy aus auf die klassische Version zugreift? Ich habe es ausprobiert und aktuell geht es da noch nicht.

TribeSpirit schrieb:Sollte dieser Code dann auch funktionieren, wenn man vom Handy aus auf die klassische Version zugreift?

Kannst du einen Screenshot machen?

Das hier haben mir verschiedene User geschickt, bei mir am Handy sieht es genauso aus:



Am PC hat sich laut Umfrage bei den anderen Usern, die Probleme hatten, nun etwas verbessert durch den CSS Code

Hallo

Es gibt unzählige Bildschirme und Geräte mit unterschiedlichen Höhen und Breiten, daher ist es schwierig, für jedes Gerät einen genauen Haltepunkt zu erstellen.

Probier diese

Code:


@media only screen and (max-width: 767px) {
    .bfheader1 img { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
  .bfheader1 img {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    .bfheader1 img { height: auto;
    max-width:100%; }
}


Hallo!

Vielen Dank für diese Codes Ich habe sie mal eingesetzt, allerdings werden dadurch nur die Bilder, also die Links und co innerhalb des blauen Headerbereichs kleiner, das Feld an sich aber nicht. Woran kann das liegen?

OK

lösche meine Codes
und lösche das auch

Code:


.bfheader1 img {
  max-width: 100%;
}


und füge diese stattdessen hinzu

Code:


.bfheader1 img {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


TribeSpirit schrieb:

pedxz schrieb:Hallo @TribeSpirit,

Nachdem ich es allerdings in das CSS Sheet eingegeben habe, hat sich nichts für die betroffenen User verändert. Ich habe ebenfalls diese Antwort gefunden: https://hilfe.forumieren.com/t17617-header-verschiedene-monitorauflosungen?highlight=header

Sie verwenden einen benutzerdefinierten Header. Verwenden Sie daher diesen Code:

Code:

.bfheader1 img {
  max-width: 100%;
}

Hallo pedxz!

Danke für den Hinweis mit dem veränderten Code Sollte dieser Code dann auch funktionieren, wenn man vom Handy aus auf die klassische Version zugreift? Ich habe es ausprobiert und aktuell geht es da noch nicht.

Bitte entschuldigen Sie. Benutzen:

Code:

#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 90% !important;
}

.bfheader1 {
    max-width: 100% !important;
}

Vielen Dank ihr Beiden! Nun hat es besser geklappt