Seite auf mobilen Geräten "Breiter" darstellen, Wie?

Hallo Leute! Mir ist aufgefallen das mein Shop auf mobilen Geräten (iPhone, iPad, S3 Mini) von Links nach Rechts exakt nur im Content dargestellt wird. Damit meine ich den Bereich wo z.B. die Einkaufswelten angezeigt werden. Ich habe jedoch Links und Rechts vom Content noch einige Bilder, die somit auf mobilen Geräten und auf sehr kleinen Auflösungen nicht dargestellt werden. Die Bilder befinden sich quasi links und rechts vom Content auf dem Background, den man ebenfalls nicht sieht. Wie kann ich meinen Shop so einstellen, das ich auch nach Links und Rechts scrollen kann und den gesamten Shop einsehen kann, wie auf meinem 27" Monitor in 1920x1080er Auflösung? Find es einwenig schaden wenn es nicht funktionieren würde. Danke und Gruß Gazu Edit: Zudem ist mir gerade noch aufgefallen das einie Sachen auch anders darsgestellt werden wie z.B. Mein Konto / Merkzettel usw… Ich habe den Border da z.B. rausgenommen, auf dem iPhone wird dieser aber wieder angezeigt usw…usw… Kann man da was machen?

Die mobile devices orientieren sich an der definierten width und in diesem Fall wahrscheinlich an der gesetzten min-width für body, die Shopware mit 4.1 eingeführt hat. Da ist sie eigentlich nicht sinnvoll aufgehoben und verursacht u. Umständen Probleme. Wenn man das ersetzen möchte, muss man aber das Template ändern. Der Rest hört sich für einen Außenstehenden etwas konfus an, welche Border, wo geändert?

Hallo hth! Danke für die Antwort. Man hat ja standartgem. eine Außenlinie um Mein Konto / Merkzettel / Service/Hilfe. Diese habe ich im Template entfernt. Das komische ist das diese auf dem iPhone wieder angezeigt wird. Zudem habe ich Mein Konto und Merkzettel untereinander gelegt. Auf dem iPhone werden diese aber wieder nebeneinander angezeigt. Also alles einwenig anders als die normale Desktop Version. Wo ist der min-width Wert genau für mobile devices zu finden? :wink: Gruß Gazu

Hallo, ich denke das was Du suchst ist der Meta Viewport Tag <meta name="viewport" content="maximum-scale=1.6, minimum-scale=0.25"> Damit können Mobil Devices abgefragt werden und demenstsprechend auch die Auflöungen eingestellt werden. Mehr gibt es über unseren Fraund Google rauszufinden. Hoffe das war es was Du suchst. Gruß

Also ich konnte über Google ein paar Erklärungen dazu finden, aber nicht spezifisch für Shopware, außer das bald eine Mobile Version von Shopware erscheinen soll. So mal suchen in welcher Datei sich dieser Code befindet. Ist dann sicherlich der minimum scale wert. Mal schauen… Danke! Edit: Finde die Datei nicht q.q

Keiner eine Idee? Q_Q

Hallo, man sollte einige Dinge nicht vermischen! Mobile Varianten gibt es schon lange für Shopware, z.B. CouchCommerce, Shopgate usw. Shopware plant keine Mobile Variante! Wir wollen zukünftig ein neues (Standard-)Template erstellen, welches dann responsive ist. (vorgestellt auf dem letzten Community Day) Das sind unterschiedliche Dinge…

Ok! Sebastian weißt du wo sich der Width Wert befindet den man einstellen sollte, damit der Shop mit seinem Background angezeigt wird? Weil ich wie gesagt meinen Shop auf iPad und co nicht vollständig sehen kann. Man sieht nur den Content und kann nur nach oben und unten scrollen. Auf dem Desktop PC erkenne ich den Background des Shops, dementsprechend habe ich auch noch ein paar Bilder links und rechts vom content die man auf mobile devices so leider nicht sieht :frowning: Danke und Gruß Gazu

Der width-Wert befindet sich im CSS, das habe ich doch schon in der ersten Antwort gesagt. min-width des body-tags. Wenn es vernünftig sein soll, ohne sich später wieder negativ auf Modals auszuwirken, ist ein eigener div-Container im Body sinnvoll. Mit Mobile-Templates im Sinne von: Jede Seite wird wieder mit Ajax nachgeladen hat das nichts zu tun. Aber damit kann man die minimale Seitenbreite festlegen. Da das Shopware-Template einen grundlegenden Design-Mangel hat (wegen des Alters der ersten Version, nehme ich an), wurde der min-width Wert bei Body als Notbehelf eingeführt, nachdem vorher ein bisschen an Header und Footer herumgebastelt worden war. Erledige dein Problem mit einer Erhöhung des min-width-Wertes und verlasse dich mit dem Rest auf die automatischen Skalierungsfunktionen der Touch/Mobile/NennSieWieDuWillstDevices und hoffe auf ein besser geplantes Responsive Template für den Rest. Wobei Responsive und Shop ohne neues UI-Konzept auch so eine Sache ist. Aber da sind schon einige Diskussionen im Forum gelaufen.

Ja ich suche gerade die Zeile … -.-"

Habe jetzt folgendes in der emotion.css gefunden: /\* iPad related styles (landscape and portrait) -------------------------------------------- \*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { Wenn ich dort aber z.B. 1920 und 1080 eintrage, sieht meine Desktop Version total verschoben aus und am iPhone ändert sich nichts… die Werte auto bringen keine Veränderung…hm… Edit: Ok ist warscheinlich nur für das iPad. Edit²: Wenn ich hier die Werte verändere: /\*\* iPHONE MEDIA QUERY \*/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { Dann wird bei einem Wert von 1080px der Shop nur minimal breiter, obwohl die Distanz zwischen den 2 Werten doch schon enorm ist. Trotzdem nur eine kleine Änderung. Und dabei wird nichtmal der Header und der Footer breiter. Sondern nur der Background und zwar auch nur nach rechts -______-" …

Das hat beides nichts mit der Breite der Webseite zu tun. Es sind Selektoren, die es ermöglichen CSS-Anweisungen in Abhängigkeit der Größe des Viewports des Gerätes zu setzen. Der Kommetar „für ipad“ ist schlicht ein wenig irreführend. Es gilt für die Bildschirmdarstellung bei allen Browsern, die diesen Standard unterstützen. Immer wenn die mit and verknüpften Bedingungen erfüllt sind, werden die folgenden CSS-Anweisungen ausgeführt Angewandt werden immer die Anweisungen, die zwischen { und } stehen, nicht die Bedingungen! Wenn als Bedingung die Desktop-Breiten eingetragen werden, dann kommen die CSS-Anweisungen im Desktop zur Anwendung und verändern somit das Layout. Der meta-Tag mit dem viewport und den scale-Anweisungen beeinflusst die Arbeitsweise von z. B. iPads. Er sagt, ob und wie die Webseite „gezoomt“ wird. Da würde ich die Finger von lassen, er hat aber nichts mit der minimalen Breite zu tun. Lies die CSS-Spezifikationen oder irgendeines der Tutorials zu CSS3 und/oder Responsive Design.

Erstmal Danke für die Antwort. Leider weiß ich gerade absolut nicht was du meinst xD Naja…bin halt Template Anfänger. Also gem. euren Antworten gibt es einen body width Wert der verändert werden muss und der ist in der emotion.css ja? Gruß Gazu

Kann keiner aushelfen? Q_Q