[3.1.10] Darstellungsprobleme prosilver responsive

[ostalbbulli]

Hallo, bei meinem Forum (phpBB3.1.10) gibt es ein Darstellungsproblem. Am PC mit Firefox und IE sieht das Forum ordentlich aus, aber ein User hat mich darauf aufmerksam gemacht dass er es mit einem Ipad nicht vernünftig anschauen kann. Ich kopiere hier mal einen Auszug aus seiner PN hinein:

"Immer mehr lesen aber mit Smartphone und Tablett. Die Tendenz ist extrem steigend. Während das Smartphone noch hochkannt benutzt wird, wird das Tablett quer genutzt.
Wenn dann auf meinem iPad nur noch 20-30 % an Nutzdaten zu sehen sind und bei jedem Aufruf eines Threads erstmal ca. 6 von 9 cm nach oben geschoben werden müssen, dann geht das wirklich nicht."

Der Style ist Prosilver, als Alernative habe ich noch den "elegance" (hab ihn Mobile genannt) weil ich irgendwo im Netz gelesen habe dass er für Appledinger geeignet sei.

Die URL meines Forums:
http://www.africa-twin.net/index.php

Gruß, Robert

[Lehrling]

Ein Screenshot wäre sehr hilfreich. Der Style prosilver zoomt eigentlich mit, weswegen ich jetzt nicht weiß, welche Darstellungsprobleme es auf Tablets gibt.

[ostalbbulli]

Sorry, den hatte ich gestern Abend vergessen. Diesen Screenshot habe ich von einem IPad User bekommen:
[ externes Bild ]

Robert

[Kirk]

Hallo
Da dein logo ziemlich breit ist und es in der responsive.css erst ab einer Breite von 700px ausgeblendet wird, kommt es zu dieser Darstellung.
Man müsste es in der oben genannten Datei so einstellen das es schon ab einer Breite von 1090px ausgeblendet wird.
Mache doch mal folgendes,
Öffne: root/styles/prosilver/theme/responsive.css
Finde und lösche das hier:

Code: Alles auswählen

	.logo {
		/* change display value to inline-block to show logo */
		display: none;
		float: none;
		padding: 10px;
	}

Füge ganz am Ende das hier ein:

Code: Alles auswählen

@media (max-width: 1090px) {
	.logo {
		/* change display value to inline-block to show logo */
		display: none;
		float: none;
		padding: 10px;
	}
}

Edit:
Altenativ kannst du diese Möglichkeiten testen:
https://www.phpbb.com/community/viewtop ... #p14473061
https://www.phpbb.com/community/viewtop ... &t=2311296
https://www.phpbb.com/community/viewtop ... 1&start=15

[ostalbbulli]

Du meinst ganz am Ende nach:

Code: Alles auswählen

[color=#00BF00].attach-controls {
margin-top: 5px;
width: 100%;
}

?
Das sind die letzten Zeilen in der responsive.css

Gruß, Robert

[Lehrling]

Es ist letztendlich egal, wo du den Abschnitt einbaust.

[ostalbbulli]

Ich habe den Code jetzt mal in das Testforum eingebaut, kann es aber nicht testen weil ich so ein Appeldingens nicht habe. Vielleicht kann von euch mal einer schauen?
http://testforum.africa-twin.net/

Nur falls das was ich gemacht habe noch nicht reichen sollte habe ich mir den anderen Weg mal angesehen.
Da mein englisch nicht das Beste ist, kann mir noch jemand das hier erklären? Das ist aus dem ersten Vorschlag.
overall_header.html:

find:

Code: Select all

{SITE_LOGO_IMG}

replace with:

Code: Select all

<img src="{T_THEME_PATH}/images/logo.png" alt="sitelogo" />

Die Zeile Site_Logo habe ich gefunden, nur mit dem T_Thme_Path komme ich nicht klar.
Robert

[Kirk]

Du hast den Code nicht korrekt gesetzt, mache es so wie ich es hier beschrieben habe.

[ostalbbulli]

Hallo Udo,

so schaut da gerade aus:
/* Logo block
----------------------------------------*/
#site-description {
float: none;
width: auto;
text-align: center;
}
@media (max-width: 1090px) {
.logo {
/* change display value to inline-block to show logo */
display: none;
float: none;
padding: 10px;
}
}
}

Habe die responsive.css mit ftp in das TESTFORUM hochgeladen und den Cache geleert. Schau dir doch bitte mal das Testforum an.
http://testforum.africa-twin.net/

Gruß, Robert

[Kirk]

Sorry ich vergaß das in 3.1.10 die responsive.css erst ab 700px greift.
Mache es mal so,
Öffne die common.css und füge dort ganz am Ende das ein:

Code: Alles auswählen

@media only screen and (max-width: 1090px), only screen and (max-device-width: 1090px) {
   .logo {
      /* change display value to inline-block to show logo */
      display: none;
      float: none;
      padding: 10px;
   }
}