Mobile Version sieht im Querformatmodus schrecklich aus

[m-werk]

Hallo Leute,

ich hab jetzt mein Projekt fast fertig. Auch für Mobile Versionen passt es jetzt.

Jetzt hab ich aber bemerkt (bei meinem Galaxy S5) dass, wenn ich die Seite aufrufe, passt alles. ABER sobald ich das Mobile auf Querformat drehe, passt das Layout überhaupt nicht mehr.

Im Web ist es mir leider nicht nachvollziehbar, wo ich jetzt ansetzen muss.

Hier die Testseite: TEST

Kann mir das mal jemand bestätigen bzw. wie kann ich jetzt einstellen, dass auch das Mobile-Design für Querformat angepaßt wird?

LG, Andi

[derRenner]

Hallo,

du hast keinen Link zur Seite mit eingefügt ...

Für's grobe Drüberschauen könntest du diese Seite hier verwenden:
http://www.responsinator.com/

Mir fällt zu den media queries und dem Querformat deines Smartphones jetzt mal nur das Stichwort 'landscape' ein - vielleicht müsstes du hierfür auch noch etwas CSS mit reinpacken.

[m-werk]

Oh, sorry. Hier der Link: TEST

Ja, das hat was mit Landscape zu tun, nur was mach ich damit? Ich hab mit deinem Link diese Seite überprüft, aber nichts auffälliges festgestellt.

LG, Andi

[webstar]

Hallo Leute,

ich hab jetzt mein Projekt fast fertig. Auch für Mobile Versionen passt es jetzt.

Jetzt hab ich aber bemerkt (bei meinem Galaxy S5) dass, wenn ich die Seite aufrufe, passt alles. ABER sobald ich das Mobile auf Querformat drehe, passt das Layout überhaupt nicht mehr.

Im Web ist es mir leider nicht nachvollziehbar, wo ich jetzt ansetzen muss.

Hier die Testseite: TEST

Kann mir das mal jemand bestätigen bzw. wie kann ich jetzt einstellen, dass auch das Mobile-Design für Querformat angepaßt wird?

LG, Andi

Was heißt, dass das Layout überhaupt nicht mehr passt? Kannst du einen Screenshot machen? Bei mir (auf nem Nexus 4) sieht alles normal aus, soweit ich es beurteilen kann.

[lebbo]

Hallo, bin gerade auf dieses Thema gestoßen. Weiß aber nicht genau, ob ich hier richtig bin. Habe ein ähnliches Problem bei einer Immobilienseite. Bei mir ist es nur leider genau umgekehrt. Hält man das Samsung-Smartphone normal in der Hand, sieht es nicht so gut aus (Schriftgröße unterscheidet sich). Sobald ich es aber quer lege, sieht alles wesentlich besser aus.

[m-werk]

So, hab es auch auf dem iPhone 3 getestet. Da sieht's auch normal aus.

Hier der Screenshot LINK

Wenn ich im Browser die "Desktop-Ansicht" aktiviere, sieht's wieder normal aus, wie im Web. Das soll aber nicht sein.

In der Grafik sieht man, dass das Mobile Menü links unten ist und das Web-Menü als Aufzählung auch erscheint.

[m-werk]

Scheint nur bei mir so zu sein. Ich hab gerade diese Seite mit einem Windows Phone getestet und dort funktioniert es auch bestens.

Echt komisch das ganze.

[MitchBuchannon]

Hallo,

mit welcher Erweiterung hast Du denn diese "onePage"-Scoll-Funktion umgesetzt?
ist das "OnePageWebsite"?

Danke schonmal...

Mitch

[Stefan01]

Hallo,


habe mit dem Responsinator und so manch anderen Seiten Bsp.1 und Bsp.2 so meine Probleme beim Testen dieser Seite.
Die Elemente ce_text bzw. das Artikel Modul sind da nicht sichtbar, dafür die Quicknavigation.

Auf dem Handy fehlt dafür mod_quicknav aber der Artikel ist da?

image1.jpg

Meine Media-Queries:

responsive1-small @media (max-width:600px)
responsive2-medium @media (min-width:600px) and (max-width:1000px)
responsive3-large @media (min-width:1000px)

Ich habe die Seite einmal mit einem zusätzlichen Seitenlayout für Devices angelegt (bei diesem Menüpunkt) und einmal ohne (bei Restaurant). Es sieht aber so aus, als ob nur das Seitenlayout mit den kombinierten CSS geladen wird). Bei responsive Websites bin ich bis jetzt auch nicht so versiert, habe bisher schon drei Seiten gebaut, wo das recht gut läuft. Das Buch von Peter Müller, Websites erstellen mit Contao 3 hat mir bisher dabei ganz gute Dienste geleistet habe aber gemerkt, dass ich meinen Workflow von Desktop first zu Mobile first umstellen sollte.

Bin für Tipps und Anregungen mal wieder sehr dankbar, auch was die Lösung für das Seitenlayout betrifft. Habe mir auch schon die Contao Demo gründlich angesehen, aber die Idee das auf meine Seite anzupassen schnell wieder verworfen.

Viele Grüße


Stefan

[Stefan01]

Als Ergänzung:

Diese Threads habe ich mir bereits dazu durchgelesen:

https://community.contao.org/de/show...r-Mobile-Seite

https://community.contao.org/de/show...obiler-Version

[Stefan01]

Habe das Problem gelöst.

[Webbaumeister]

Habe das Problem gelöst.

Wie hast du es gelöst?
Eine kurzes Beschrieb der Lösung wäre super. Vielleicht hat jemand mal dasselbe Probleme und findet beim suchen diesen Thread, dann wärs gut wenn hier nicht nur das Problem steht sondern auch die Lösung.

[Stefan01]

Hallo

erstmal Danke an Webbaumeister für den Hinweis.

Das Problem war, dass sich verschiedene Selektoren gegenseitig in die Quere gekommen sind, da die Media-Queries nicht richtig gesetzt wurden und in bestimmten Media-Queries nicht die benötigten Selektoren vorhanden waren. Eigentlich ein recht einfach behebbarer Fehler.

Was mir jetzt nur noch Kopfzerbrechen bereitet, ist die Tatsache, dass ich meinem .mod_article bei Aufruf mit einem iPad in portrait-Ansicht einen breiteren %-Wert mitgeben möchte.

Es geht eben nur darum die Prozentwerte für das iPad in portrait-Ansicht anzupassen, mit min-height:1024px und zig anderen Kombinationen habe ich es schon probiert, leider ohne Erfolg. Ist bestimmt wieder nur eine Kleinigkeit. Hier noch mal der Link zu der Responsinator Testseite.

[Stefan01]

Auch schon wieder selber gelöst!

Man sollte eben nicht arbeiten wenn man krank ist

@media only screen and (min-width: 700px) and (max-width: 768px)

Viele Grüße

Stefan

[m-werk]

@MitchBuchannon

mit welcher Erweiterung hast Du denn diese "onePage"-Scoll-Funktion umgesetzt?
ist das "OnePageWebsite"?

Ich habe es mit Artikeln gelöst und als Scrolling hab ich moo_smoothScroll eingesetzt. Ich hatte es zuvor mit dem Modul OnePageWebsite eingesetzt, aber das hat dann mit dem dk_mmenu nicht geklappt, so dass auf Mobilen Seiten auch gescrollt wird.

LG, Andi