Im Theme 'Brooklyn' zwei Produkte nebeneinander darstellen !

[Gymetrics]

Hey Freunde,

ich benutze das Theme 'Brooklyn' und im folgenden Bild ist zu sehen, dass nur ein Produkt bei der Mobilen Ansicht angezeigt wird. 

Ich möchte aber das genau zwei Produkte nebeneinander in der Mobilen Ansicht angezeigt werden und nicht nur eins. 

Kann mir jemand helfen das zu ändern :)?

[r8r]

Hi @Gymetrics 

so?

Beim Unterschreiten welcher Bildschirmbreite (in px) soll das so dargestellt werden?

LG, Mario

[Gymetrics]

Hi 🙂

Ja genau so in der Art:) ..wie mach ich das ? Lg anil




##- Bitte geben Sie Ihre Antwort oberhalb dieser Zeile ein -##


Von meinem iPhone gesendet

[Gymetrics]

Hi:),

ja genau so ! Wie mach ich das :)?

lg 

anil 

[r8r]

… unter der Vorraussetzung, dass Du als Grid-Style Grid und nicht Collage gewählt hast

kannst Du folgenden CSS-Code ergänzen:

@_media screen and (max-width: 590px) {
  .template-collection .grid-item.grid-product {
    width: 50%;
  }
}

LG, Mario

[Gymetrics]

Hey Mario,

erstmal vielen Dank für deine Hilfe:), aber ich hab echt keine Ahnung wo genau ich den Code jetzt ergänzen bzw. einfügen soll. Grid ist bereits gewählt.

Lg

[r8r]

Hallo @Gymetrics 

nicht die sauberste, aber die schnellste Integration schaffst Du, indem Du den Code am Ende der Datei /assets/theme.scss.liquid (Online Store > Themes > (Themename) > Actions > Edit Code) einfügst.

Liebe Grüße,
Mario

[Gymetrics]

So, oder hab ich was vergessen? Hat leider nicht funktioniert und der Theme Editor zeigt einen Fehler an 😕

[r8r]

Ich weiss nicht ob das einen Unterschied macht, aber @_media sollte @_media sein – das ist mir vorhin schon falsch reingerutscht.

Welchen Fehler bekommst Du angezeigt?

LG, Mario

[r8r]

ah doch – ich weiss schon warum … hier im Forum gibt's einen user "Media" – darum verändert der Editor das entsprechend. Blöd. @ media (ohne Leerzeichen) soll es lauten!

@Gabe kann man da was machen, dass im Forum auch Mediaqueries korrekt gepostet werden können?

[Gabe]

Hey Mario! @r8r 

Wie genau war das vorher mit Media Queries nochmal?

[r8r]

wenn ich @_media schreibe, wandelt das Board das entsprechend um …

 

[Gymetrics]

also der Fehler bleibt unverändert sobald ich den Code in die von dir angezeigten Ort einfüge, verändert sich die komplette Seite

und alles ist unsortiert und wird fehlerhaft dargestellt.

[r8r]

@Gymetrics bekommst du eine Fehlermeldung? Wenn ja, welche? Ansonsten brauch ich zugang zur Webseite. Der Codeschnipsel ist für ein unverändertes Brooklyn-Theme – nactürlich kann auch die eine oder andere Konfigurationseinstellung darauf Auswirkungen haben. Aber das ist das Risiko, wenn wir hier keine Referenzlinks bekommen, gegen die wir den Code testen können ¯\_(ツ)_/¯

LG, Mario

[Gymetrics]

@r8r 

Das hier: 

du kannst auch gerne zugang zu meinem Shop haben wenn du möchtest 🙂

[r8r]

Hi @Gymetrics 

kannst Du bitte einen Screenshot zu dem eingefügten Code posten? Die Fehlerbeschreibung sieht genau so aus, wie das was ich beschrieben hab, nämlich dass die [AT]media Regel durch die Manipulation des Codes hier im Forum zu ungültigem CSS führt.

Wahrschienlich wird die ganze theme.css aus doesem Grund nicht korrekt gebuildet und zerfetzt Dir die Seite … wenn Du den Block rausnimmst, sollte es wieder gehen. Bzw. wenn du die Mediaquery korrekt öffnest (Klammeraffe, kein Leerzeichen, media, Leerzeichen …). Leider kann ich das aber eben hier nicht posten ¯\_(ツ)_/¯ 

LG, Mario

[Gymetrics]

@r8r 

[r8r]

@Gymetrics wie schon beschrieben …

• Richtig: Klammeraffe, kein Leerzeichen, media, Leerzeichen …
• Falsch: Klammeraffe, Leerzeichen, Media, Leerzeichen

[Gymetrics]

Nope, Fehler besteht immer noch... 

Spoiler

[r8r]

@Gymetrics ich kann das leider nicht reproduzieren …

 

[Gabe]

Hey @Gymetrics 

Ich habe jetzt dein letztes Screenshot mit einem Spoiler Tag versehen, denn es gibt ein paar private Details darin zu sehen. 

Bzgl. der Fehlermeldung, mir scheint dass der Wurm im Syntax des Code liegen könnte, wie z. B. die folgenden Beispiele:

• Es fehlt z. B. eine 'closing } bracket' oder } Klammer in einer Zeile.
• Die <h2>-Tags sind ungültig, wenn sie innerhalb des <label>-Tags platziert werden. 
• Der <style>-Code aus dem Beschreibungsfeld wird auskommentiert, da er in den <head>-Tag einer Seite und nicht in den Body eingefügt wurde.

Du kannst deinen Code durch einen Code Validator laufen lassen, um zu prüfen ob die Tags ungültig sind oder falsch platziert und die Reihenfolge der Tags geändert werden muss, so dass der Code richtig funktioniert wie erwartet.

Um eine bessere Kontrolle über die Seiten zu bekommen, rate ich auch mehrere Vorlagen oder einen neuen Abschnitt zu erstellen und testen.

VG,

[r8r]

… ich hab glaub ich in meinen letzten Beiträgen den Fehler schon mehrfach erörtert. Ist das öffnende Mediaquery-Statement entsprechend korrigiert?

[Julia121]

Hallo, ich habe das selbe Problem und bei mir funktioniert es nicht. Hast du mittlerweile eine Lösung gefunden?