[3.2] prosilver für Mobilgeräte wird nicht kleiner

[Melmac]

@Joyce&Luna

Wir basteln ja nicht am originalen prosilver herum - dass dies nicht unbedingt sinnvoll ist, darüber sind wir uns ja alle einig

würde auch reichen, in der responsiv.css Zerile 137 das min-width: 290px; auf min-width: auto; stellen.

Ich bin mir jetzt aus dem Stegreif nich ganz sicher: wenn ich es noch richtig in Erinnerung habe, dann muss bei min oder max Dimensionen ein konkreter Wert angegeben werden (in px, % etc.). Alternativ ein Wert 0 - nur dass dadurch die betreffende Eigenschaft eigentlich "deaktiviert" wird: man könnte sie dann wohl auch gleich komplett entfernen.

--------------

@Talk19zehn

Jene Änderung könnte man sich m.E. ggf. in Folge sparen: Bin mir nicht sicher, ob sie sich durchsetzt.
.wrap {
min-width: 270px;
}

Ich kann jetzt nicht ausschließen, dass in meinem "Bastel-prosilver" irgendwo noch ein Macken vorhanden ist, aber wenn ich hier die Anpassung für .wrap weglasse und nur das padding für .post einfüge, dann zeigt das bei mir keine Wirkung.
Ab einer horizontalen Auflösung unterhalb 300px rutscht es dennoch weiterhin über den rechten Rand des Viewports hinaus und der horizontale Scrollbalken erscheint.
Dem komme ich nur bei, wenn ich die min-width des Wrappers anpasse - es sei denn, ich habe da wieder einmal einen Denkfehler drin
(Am padding muss ich dann auch nichts ändern: der ursprüngliche Wert bleibt so weiter wirksam.)

[Joyce&Luna]

Mit dem Wert 0 würde es auch gehen, aber weg lassen geht nicht.
Mir ist übrigens nicht bekannt das ein Wert angegeben werden muss.
Aber ich lerne gerne noch dazu.

[Talk19zehn]

Hi Melmac, es greift doch zudem prozentual (postbody, postprofile, etc. ...):

@media (min-width: 850px) {
.postbody {
width: 76%;
}

@media (min-width: 700px) {
.postbody { width: 70%; }
}

Man darf m.E. den einleitenden Container nicht vernachlässigen. Das padding in "post" greift in meinen Testergebnissen (Standard phpBB-3.2.2 prosilver).

Ich kann keinen Nachteil nachvollziehen oder gar Fehlerchen entdecken. Auch ergibt sich kein Querscrollen.

Wundersame Grüße

[Melmac]

@Joyczehne&Luna:

Mir ist übrigens nicht bekannt das ein Wert angegeben werden muss.

https://www.w3schools.com/cssref/pr_dim_min-width.asp, Punkt "Property Values"
Darüber bin ich auch erst durch Deinen Ansatz gestolpert, auch wenn es, im Nachhinein betrachtet, eigentlich logisch ist

min-width überschreibt ab der dort definierten horizontalen Auflösung den Standardwert der Eigenschaft width für den betreffenden Selektor. Dieser Breakpoint müsste also einen genau definierten Wert zugewiesen bekommen - was auto aber nicht ist

aber weg lassen geht nicht.

Stimmt ...

-------

@Talk19zehn:

Auf die Gefahr hin, mich jetzt hoffnungslos zu blamieren:

Man darf m.E. den einleitenden Container nicht vernachlässigen.

Die genannten (prozentualen) Werte für die Breite von .postbody sind doch in Relation zum übergeordneten Container .post *hmmm*
Der übergeordnete Container für .post ist, soweit ich das richtig verstanden habe, .page-body - für den aber keine (eigene) Breite definiert ist. Die hängt doch wiederum von dessen übergeordneten Container ab: .wrap.?
Oder befinde ich mich da gerade auf dem völlig falschen Dampfer (wäre ja nicht das erstemal ... )?

Der Scrollbalken erscheint auch erst unterhalb einer horizontalen Auflösung von 300px - bei höheren Auflösungen tritt dies dagegen nicht auf.
Dies würde dann auch zu den definierten padding Werten passen:
Bis zu einer max-width von 700px gibts ein linkes und rechtes padding von jeweils 5px, zusammen also 10px. .wrap selbst ist mit einer Mindestbreite von 290px definiert.
=> 290px (= Mindestanzeigebreite von wrap) + 10px (fürs padding von 2 * 5px) = 300px (=> der Schwellwert, unterhalb dessen dann gescrollt werden muss).

------------

Trotzdem bleibt die Frage, ob diese Anpassung überhaupt durchgeführt werden müsste: bei jedem halbwegs aktuellen Smartphone sollte die minimale horizontale Auflösung doch eigentlich größer 300px sein (oder 600px bei Retina-Displays) ...

[sepp71]

Hui, herzlichen Dank für die vielen Antworten! Ich bin nicht so fließend in CSS, dass ich sie mit ihren Vor- und Nachteilen gleich nachvollziehen könnte.
Aber bis zu einem Child-Style habe ich es schon gebracht, auch wenn der im Wesentlichen nur die Farben ändert und eine CSS-Zeile für einen Ticker enthält.
An dem Beispiel mit dem schmalen Bildschirm wollte ich darstellen, dass es rechts am Rand bei mir ein Umbruchproblem gibt.
Vielleicht kann man es auf diesem Screenshot besser erkennen: Ich sehe keinen Grund, warum die Beschreibung des "untersten" Forums nicht schon umgebrochen wird (bei dem "od" am Bildschirmrand).
[ externes Bild ]
Sobald der Bildschirm schmaler ist als im Screenshot gezeigt, muss man am rechten Rand (zumindest in Firefox und Chrome, andere nicht getestet) quer scrollen.
Wenn ich z.B. die Seite auf meinem Smartphone (Galaxy A3 2017, Display: 720 x 1280 px) aufrufe, wird sie im Portrait-Modus im "mobilen" Layout aufgerufen und komplett auf dem Bildschirm angezeigt. D.h. lesen kann man da gar nichts.
Und beim Heranzoomen im Landscape-Modus "stören" die überbreiten Zeilen den Zoom (entweder sind die Buchstaben klein oder man muss quer scrollen).

Vielen Dank schon einmal für Eure Bemühungen!

Sepp

[Melmac]

Dann habe ich Deinen ursprünglichen Beitrag wohl komplett falsch interpretiert: ich hatte es so verstanden, dass es um den Text in den Beiträgen selbst geht ...

Es dreht sich also nicht um den Beitragstext (= der Text in einem Beitrag/Post), sondern um die Forumsbeschreibung, die auf den entsprechenden Übersichtsseiten angezeigt wird?
Das müsste ich mir dann nochmals neu anschauen und durchspielen, sorry.

Nur mal eine Vermutung: das Smartphone besitzt, soweit ich weiß, ein (Retina-?)Display mit einer hohen Density von 312 ppi - gut möglich, dass da jetzt die eine oder andere @media Regel nicht so korrekt greift.

[Joyce&Luna]

Ohh da sind wir jetzt schon zu zweit Melmac
Hier wurde ja komplett aneinander vorbei geredet.
Ich bin davon aus gegangen das es sich nur um den Wrap handelt den man bei 300px seitlich scrollen muss.
Darum nur die Wrap Änderung

[sepp71]

Es tut mir leid, dass ich mich so ungenau ausgedrückt habe!


Ich bekomme meine Informationen auch nur von den Usern und versuche sie dann (selber kein Experte, sondern nur interessierter Laie) nachzuvollziehen.
Bei diesem Nachvollziehen habe ich jetzt auch noch bemerkt, dass das Problem nur bei dem einen der beiden 3.2.2-Boards auftritt und bei dem anderen nicht, die zweite wird tipp-topp so angezeigt, wie ich es gerne hätte. Es werden dieselben Extensions benutzt.
Bevor ich Euch jetzt noch einmal so viel Arbeit mache:
Wo fange ich bei einem exakten Datei- und Einstellungsvergleich am besten an? Habt Ihr "Verdächtige"?
Oder werkzeug, mit dem man die festgelegten Breiten von CSS-Elementen am Bildschirm "live" überprüfen kann? Mit meinen FF-Tools werden mir zwar die tatsächlichen Breiten angezeigt, aber das hilft ja nicht wirklich.

Sepp

[Melmac]

Alles kein Problem

Wo fange ich bei einem exakten Datei- und Einstellungsvergleich am besten an? Habt Ihr "Verdächtige"?

Wenn ansonsten alles gleich ist, dann fallen mir aus dem Stegreif bei solchen Auffälligkeiten zuerst zwei mögliche "Quellen" ein: die installierten Extensions und die eingesetzten Styles.

Der Style basiert, wenn ich das richtig verstanden habe, auf prosilver - die Änderungen betreffen dann auch nur das CSS?
Ist der Style in beiden Boards der gleiche, inklusive aller an ihm vorgenommenen Anpassungen?
Anders ausgedrückt: ist derjenige im "Problemboard" eine exakte Kopie desjenigen, der im anderen Board fehlerfrei angezeigt wird, oder hast Du ihn noch zusätzlich bzw. abweichend angepasst?
Tritt der Fehler auch dann noch auf, wenn Du auf ein originales, unmodifiziertes prosilver wechselst? Wenn nein, dann liegt der Fehler höchstwahrscheinlich in Deiner modifizierten Styleversion.

Falls Du Dir jetzt nicht mehr sicher bist, welche Anpassungen Du in welchen Stylesheets vorgenommen hast, dann könntest Du einen Dateivergleich zwischen den Stylesheets eines originalen prosilvers (alternativ: denen des "funktionierenden" Styles) und denen des Styles im "Problemboard" vornehmen.
Mit den entsprechenden Tools (z.B. Winmerge oder Meld) ist das kein goßer Aufwand: die zu vergleichenden Ordner auswählen und im Dateivergleich werden vorhandene Unterschiede im Code zwischen Dateien gleichen Namens markiert/kenntlich gemacht.

btw.:
Nicht falsch verstehen: dies wäre doch eine gute Gelegenheit, die bisherigen Edits an den originalen Stylesheets wieder herauszuziehen und das Thema "Tochterstyle" anzugehen ...

[Tastenplayer]

Oder Werkzeug, mit dem man die festgelegten Breiten von CSS-Elementen am Bildschirm "live" überprüfen kann?

Ich nehme immer den:
http://www.responsive.cc/ Das funktioniert auch mit einem Lokalen Forum zu 99.99%. Wenn es in einem Display da nicht stimmt, kann man das auch direkt im entsprechenden Gerät ändern bis es passt. Oder meinst Du was Anderes?