Responsive Ansicht Dawn Theme

[DamianF]

Hallo zusammen, 

ich habe das Problem, dass wenn ich im Theme Editor auf die Responsive Ansicht gehe, meine Produktseite richtig angezeigt wird. Auf voller Breite ist die Produktbeschreibung unter dem Produktbild und alles ist super zu sehen. 
Wenn ich meinen Shop aber mit dem Smartphone besuche, dann ist die Produktbeschreibung neben dem Produktbild und somit beides sehr klein! 
Ich bin der Meinung, dass es anfangs nicht so war und ich es evtl. selber verstellt habe, allerdings kann ich nichts finden um es wieder richtig einzustellen. 

Vielen Dank im Voraus 

Damian 

[Gabe]

Hey @DamianF 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Darf ich dazu fragen auf welchen Browser du deine Produktseite auf Mobile besuchst?

VG,

[DamianF]

Hey Gabe, 

hier schonmal der Vorschaulink: https://bvricmt4zuoctag1-81601429838.shopifypreview.com

Normalerweise gehe ich mit dem Smartphone immer über den Safari Browser rein habe aber auch schon den Chrome Browser probiert und es sieht genau so aus. 
Ich hänge auch mal ein Screenshot von einer Produktseite an, bei der man auch sieht wie es bei mir auf dem Smartphone aussieht. Normalerweise sollte ja in der Mobile Version der Text unter dem Bild sein und auf voller Breite des Displays. 
es sind aber nicht nur die Produktseiten betroffen sondern zum Beispiel auch die Startseite des Shops. 

[DamianF]

Hier jetzt auch der Screenshot.

 

[Gabe · Accepted solution]

Hey @DamianF 

Ja da stimmt etwas nicht:

Ist das auch so in einer frischen Theme Kopie vom Theme Store gedownloadet? Wenn nein, dann ist dein Theme irgendwie aufgrund einer vergangenen Code Änderung etwas kaputt gegangen leider. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. 

Spezifisch ist es ggf. so, dass du zunächst überprüfen solltest, ob CSS- oder JavaScript-Code geändert wurde, der das Layout auf Mobilgeräten beeinflusst. Der oben-abgebildete HTML Code zeigt verschiedene Elemente und Medienabfragen, die für die Anzeige auf verschiedenen Bildschirmgrößen verantwortlich sind.

Hier ein paar Schritte, um das Problem zusammen mit einem Experten zu diagnostizieren und zu beheben:

1. Überprüfe benutzerdefinierte CSS-Anweisungen: Sieh dir insbesondere die Media Queries an, die für die Anpassung des Layouts an kleinere Bildschirme verwendet werden. Es könnte sein, dass eine Änderung hier das Layout auf Mobilgeräten beeinflusst hat. Suche nach CSS-Regeln innerhalb von @media-Anweisungen, die bei einer Bildschirmbreite von weniger als 750px angewendet werden.

2. Prüfe die Theme-Einstellungen im Shopify-Adminbereich: Einige Themes bieten Einstellungen für die Anordnung von Elementen auf Produktseiten für Mobilgeräte. Überprüfe, ob es solche Einstellungen gibt und ob sie korrekt konfiguriert sind.

3. Vergewissere dich, dass kein JavaScript das Layout beeinflusst: JavaScript oder jQuery-Skripte können das DOM manipulieren und die Anordnung von Elementen auf der Seite ändern. Überprüfe, ob es Skripte gibt, die speziell für Mobilgeräte ausgeführt werden und das Layout der Produktseite verändern könnten.

4. Responsive Design testen: Nutze Entwicklertools in Browsern wie Chrome oder Firefox, um das responsive Verhalten der Seite zu testen. Du kannst damit verschiedene Bildschirmgrößen simulieren und sehen, wie das Layout reagiert. Dies kann helfen, das Problem besser zu lokalisieren.

5. Theme-Backup wiederherstellen: Wenn du kürzlich Änderungen am Theme vorgenommen hast, versuche, zu einer früheren Version des Themes zurückzukehren, bei der das Problem noch nicht auftrat.

6. Shopify-Support kontaktieren: Wenn du das Problem nicht selbst lösen kannst, könnte der Shopify-Support weitere Hilfestellung leisten. Es könnte ein spezifisches Problem mit dem Dawn Theme vorliegen, das sie bereits kennen und für das sie eine Lösung haben.

Wenn du konkrete Abschnitte des Codes hast, die du überprüfen möchtest oder weitere Hilfe benötigst, lass es mich wissen. Ansonsten wäre hier ein Programmierer der einen Deep-Dive in dein Theme Code machen der beste Ansprechpartner. Ich kann das ja leider nicht.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[DamianF]

Perfekt vielen Dank für die ausführliche Antwort!

Mir ist nach deiner Antwort eingefallen, dass ich ja ein Script eingefügt habe wegen dem Cookie Banner. Diesen habe ich mir nochmal angeschaut und tatsächlich war dort einfach ein Leerzeichen an einer falschen Stelle. Dieses hat dann zu dem Fehler geführt. Jetzt ist alles wieder in Ordnung. 

Vielen Dank nochmal und schöne Grüße 

Damian 

[Gabe]

Wow hast du super gelöst! 💪