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

[sepp71]

Hallo zusammen,

nach dem Update meiner Forensoftware auf 3.2 habe ich den Eindruck, dass sich prosilver nicht mehr so gut an mobile Geräte anpasst.
In 3.1. konnte ich die Fensterbreite bis ca. 285 px Breite herunterskalieren und z.B. der Beitragstext hat sich im Zeilenumbruch noch mehrfach angepasst.
In 3.2. erfolgt die Anpassung nur noch bis ca. 682 px (Umschaltung vom Desktop-Layout auf das mobile Layout), aber dann - innerhalb des mobilen Layouts - bleiben die Zeilenumbrüche unverändert, der Text wird also nicht mehr angepasst. In dem 285er-Fenster aus dem ersten Beispiel kann man den Text dann nur noch durch Querscrollen lesen.

Hat jemand eine Idee, woran das liegen könnte und v.a. wie man es wieder hinbekommt?
Meine ersten mobilen Besucher fragen schon...

Ich hatte schon meine Extensions oder Anzeigen im Verdacht, aber auch nach dem Abschalten incl. Cache-Löschung etc. blieb der beschriebene Effekt.

Sepp

[Joyce&Luna]

Welches Handy macht den noch 285px ?
Standard sind 320px darauf werden alle Style angepasst.
Das ganze ist eine responsive Sache, das man aber anpassen kann.

Mach mal Screenshot was alles so bemängelt wird von deinen Besuchern. Benutzt du nur Prosilver oder auch einen anderen Style?

[Tastenplayer]

In 3.2. erfolgt die Anpassung nur noch bis ca. 682 px (Umschaltung vom Desktop-Layout auf das mobile Layout),

Stimmt hatte bei meinen selber erstellten Styles das gleiche Problem - Aber das musst Du eben selber in der responsive.css anpassen.
Ich habe allerding einach in der common.css Zeile 145 min-width gelöscht. Jetzt scheint es überall korrekt angezeigt zu werden.

Code: Alles auswählen

.wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}

Im Prosilver 3.2.2 stimmt es allerdings bei mir mit der Auflösung. Hab mir das jetzt nochmals genauer angeschaut. Man muss beim Wrap in der responsive.css, Zeile 185 nur noch ein !important hinsetzen. Und in Deinem Fall 290px durch 285px ersetzen. Dann wird es in jedem Style wieder korrekt angezeigt.

Code: Alles auswählen

	.wrap {
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		outline: none !important;
		margin: 0 !important;
		min-width: 290px;
		padding: 0 5px !important;
	}

Welches Handy macht den noch 285px ?

Vielleicht so was!?
http://www.50plus.de/article/der-ueberr ... hones.html

[Joyce&Luna]

An Prosilver würde ich schon mal gar nichts verändern, wenn dann rate ich zu einen Child Style.
So hat er jede seine Veränderungen an Prosilver im Überblick.
viewtopic.php?f=153&t=239682

[Tastenplayer]

An Prosilver würde ich schon mal gar nichts verändern, wenn dann rate ich zu einen Child Style.
So hat er jede seine Veränderungen an Prosilver im Überblick.

Um lediglich hinter

Code: Alles auswählen

min-width: 290px;

ein

Code: Alles auswählen

!important

zu setzten um dann aus

Code: Alles auswählen

min-width: 290px;

ein

Code: Alles auswählen

min-width: 285px !important;

zu machen, muss ich doch keinen Childstyle erstellen! Ich darf halt nur nicht vergessen, dass ich dies in jeder neuen Prosilver-Version wieder machen muss. Falls im eigenen Style die responsive.css eingefügt ist, mach ich das logo da. Oder der eigene Style besteht bereits in einer style.css(Child Style) dann diese Änderung natürlich auch dort einfügen.

[Melmac]

In 3.2. erfolgt die Anpassung nur noch bis ca. 682 px (Umschaltung vom Desktop-Layout auf das mobile Layout), aber dann - innerhalb des mobilen Layouts - bleiben die Zeilenumbrüche unverändert, der Text wird also nicht mehr angepasst.

Das kann ich irgendwie nicht reproduzieren: der Zeilenumbruch passt sich auch unterhalb einer horizontalen Auflösung von 680px weiterhin an ... ohne solche "Aussetzer".
Erst bei Auflösungen kleiner 290px gibts ein kleines Problem: rechts entfällt der Abstand zwischen Text und Fensterrand.
Ob dies in der Praxis wirklich ein Problem ist, darüber ließe sich streiten

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

Man muss beim Wrap in der responsive.css, Zeile 185 nur noch ein !important hinsetzen

!important sollte man wirklich nur dann verwenden, wenn es gar keine andere Möglichkeit mehr gibt, das Problem via CSS zu lösen (und dann auch bitte nur bei den Eigenschaften, bei denen es auch erforderlich ist) - es ist schließlich nicht frei von möglichen "Nebenwirkungen", wenn es im falschen Kontext und/oder ohne zwingende Notwendigkeit gesetzt wird ...

muss ich doch keinen Childstyle erstellen!

Müssen tut man gar nichts, auch wenn das Erstellen eines Childstyles bei Änderungen am Original des Styles die auf Dauer unproblematischere und sauberere Lösung wäre.
Spätestens dann, wenn in Zukunft vielleicht noch weitere Anpassungen hinzukommen sollten, wird man nicht umhinkommen, genau dies zu machen - warum also nicht gleich?

Immerhin gibt es ja auch noch einen Kompromiss zwischen "Anpassen der Originaldateien" und "Erstellen eines vollwertigen Tochterstyles": wenn sich die Änderungen ausschließlich auf das CSS des Styles beschränken, kann man auch mit einem zusätzlichen (= eigenen) Stylesheet arbeiten ...

Hierzu im /theme-Verzeichnis von prosilver einfach eine neue Datei custom.css anlegen und diese dann am Ender der stylesheet.css mit

Code: Alles auswählen

@import url("custom.css?v=3.2");

importieren.

In dieser dann folgenden Code einfügen:

Code: Alles auswählen

@media (max-width: 700px) {
  .wrap {
    min-width: 270px;
  }
}

Damit sollte dann dieses Problem behoben sein - ganz ohne einen vollwertigen Tchterstyle zu erstellen und, vor allem, ohne unnötige !important zu verwenden.

Falls es jetzt dennoch weiterhin zu dem angesprochenen Darstellungsproblem kommt, dann wäre vielleicht zu prüfen, ob eine Extension installiert ist, die zusätzliche Formatierungen für diesen Bereich hinzufügt, die dann dazwischenfunken.

[Joyce&Luna]

Mit dem custom ist natürlich auch eine gute Lösung.
Daran hatte ich jetzt nicht gedacht.

Sollte aber Sepp weitere Veränderungen am Style vornehmen wollen, da würde ich ihm aber dazu raten einen Tochter Style zu machen.

[Talk19zehn]

Moin, moin, - wäre es möglich die Klasse "post" mit einem padding zu versehen? Das klappt in meinem Falle in den ersten Tests: Standard prosilver (phpBB-3.2.2))

Code: Alles auswählen

@media (max-width: 700px) {
	.wrap {
		min-width: 270px;
	}
	.post {
	padding: 18px;
	}
}

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


Der Viewport -> Mobile portrait (320x480) <div class="postbody"> .... und <div class="content"> ändert sich unter Berücksichtigung von padding auf ca. 284x365px und Nachteile kann ich im Schnelltest keine erkennen.

Viele Grüße

[Joyce&Luna]

Wenn man schon am Prosilver selbst herum bastelt, würde auch reichen, in der responsiv.css Zeile 137 das min-width: 290px; auf min-width: auto; stellen.

[Talk19zehn]

Hm, - - sehe ich anders, denn die responsive.css deklariert in Zeile 450 postbody bereits width: auto;:

Code: Alles auswählen

.postprofile, .postbody, .search .postbody {
		display: block;
		width: auto;
		float: none;
		padding: 0;
		min-height: 0;
	}

und mein Ansatz basiert auf der Standardklasse "post" in dem einleitenden Container <div id="xx" class="post has-profile bg2 online"> und dem Vorschlag von Melmac. Insofern ...
Wahrscheinlich führen einige Wege zum Erfolg. Jedenfalls habe ich die fehlenden 5 Pixel oder sind es doch einige mehr im phpBB-Standard nicht finden können, um das Querscrollen grundsätzlich unterbinden zu können.

Okay, ich gebe dann ab.

Grüße