Sieht jemand meinen Fehler in CSS?

Comments

[FaTech]

Klar, oben links. Ja genau da. Exakt, du hast es ... Nein, mal ehrlich. Wie sollen wir wissen, was falsch ist, wenn du uns nicht sagst, was genau nicht funktioniert?

[niru64]

Sorry habe vergessen rein zu schreiben, dass das erste @media nicht funktioniert. Es zeigt mir in Zeile 9 an das ein semikolon fehlt, in Zeile 13 & 18 soll { fehlen

[FaTech]

Benutzt du CSS, SCSS, ...?

[niru64]

CSS

Answer 1

[EinAlexander]

Sieht jemand meinen Fehler in CSS?

Die schließende, geschweifte Klammer aus Zeile 27 gehört nach Zeile 6.

Alex

Comments

[niru64]

Nein, .grid-container soll schließlich wenn das Fenster groß genug ist von block zu grid wechseln und da verschieden viele Spalten haben, das ist schon richtig so

[EinAlexander]

@niru64

das ist schon richtig so

Wenn ich sage, das ist falsch, dann ist das ganz sicher nicht richtig so. Was du willst, schreibt man so

.grid-container {
    display:block;
    ...
}

@media (min-width:768px) {
    .grid-container {
          display:grid;
          ...
    }
} 
  

[niru64]

@EinAlexander

Ich habe ganz vergessen dass es nur in SCSS vorgesehen ist hat aber schlusssndlich auch in css eso funktioniert

Answer 2

[FaTech]

Ah. Die Schreibweise von dir, dass du @media in eine Klasse schreibst, funktioniert meines Wissens nach nur in SCSS. In CSS musst du es umgekehrt machen und die Klasse in @media setzen

Comments

[niru64]

XD Ich habe die letzte Woche mit SCSS gearbeitet und habe vergessen dass es ja in CSS nicht so vorgesehen ist

Answer 3

[guteantwort626]

Die ursprüngliche Frage scheint sich ja erledigt zu haben, aber du könntest Code sparen (ist immer gut) und bräuchtest nur ein display: grid; bei der media-quer mit der kleinsten Bildschirm breite. Alles was breiter ist hat ja dann automatisch display: grid;

Comments

[niru64]

Das hat den Grund das ich so bestimmte Größen der Elemente einfacher Steuern kann, da alle ca. gleich viel Text und unterschiedlich große Bilder haben

[guteantwort626]

@niru64

Das ist schon klar, aber das display: grid; bleibt doch gleich, du änderst ja nur grid-template-column...