media query, befehl in violett?

[Jochen Pöting]

Hallo,

ich lerne noch und stoße auf ein Problem, das ich nicht lösen kann. Bei Eingabe einer media query: @media (max-width: 768px) { width: 100%; } erscheint >>width: 100%<< in violett statt weiß/orange und wird nicht ausgeführt. Trotz intensiver Suche finde ich die Ursache nicht. Alle vorherigen Schritte, auch weitere media queries ließen sich einwandfrei eingeben.

Im Anschluss an meine Eingabe folgt ein langes Kapitel, das ich aber schon länger auskommentiert hatte. Kann das evtl. einen Einfluss haben?

Ich hoffe auf einen Tipp. Gruß Jochen

[Matthias Scharwies]

Servus!

Hallo,

ich lerne noch und stoße auf ein Problem, das ich nicht lösen kann. Bei Eingabe einer media query: @media (max-width: 768px) { width: 100%; } erscheint >>width: 100%<< in violett und wird nicht ausgeführt. Trotz intensiver Suche finde ich die Ursache nicht. Alle vorherigen Schritte ließen sich einwandfrei eingeben.

Probier mal:

@media (max-width: 768px) {
  body {
    width: 100%;
  }
}

oder ein anderes Element / einen anderen Selektor.

Im Anschluss an meine Eingabe folgt ein langes Kapitel, das ich aber schon länger auskommentiert hatte. Kann das evtl. einen Einfluss haben?

Ich hoffe auf einen Tipp. Gruß Jochen

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Jochen,

@media (max-width: 768px)
{
   width: 100%;
} 

Was soll denn eine Breite von 100% bekommen? width: 100% legt eine Style-Eigenschaft fest, aber du musst eine vollständige CSS Regel aufschreiben, die aus Selektor und Eigenschaften besteht.

Wenn Du beispielsweise ein Element mit id="foo" auf 100% Breite setzen willst, müsste es so aussehen:

@media (max-width: 768px)
{
   #foo    /* Edit: foo-Fehler korrigiert, thx@Kalk */
   {
      width: 100%;
   }
} 

Andersrum geht's aber nicht:

#id
{
   @media (max-width: 768px)
   {
      width: 100%;
   }
} 

Rolf

[Tabellenkalk]

Hallo,

Wenn Du beispielsweise ein Element mit id="foo" auf 100% Breite setzen willst, müsste es so aussehen:

@media (max-width: 768px)
{
   #id {
      width: 100%;
   }
} 

gemeint war wohl:

@media (max-width: 768px)
{
   #foo {
      width: 100%;
   }
} 

Gruß
Kalk

[klawischnigg]

Hi there,

ich lerne noch und stoße auf ein Problem, das ich nicht lösen kann. Bei Eingabe einer media query: @media (max-width: 768px) { width: 100%; } erscheint >>width: 100%<< in violett statt weiß/orange und wird nicht ausgeführt. Trotz intensiver Suche finde ich die Ursache nicht.

Wie hast Du gesucht? Normalerweise sagen Dir die Developper-Tools Deines Browsers, woher style-Eigenschaften Deiner Elemente kommen.

Alle vorherigen Schritte, auch weitere media queries ließen sich einwandfrei eingeben.

Mit Media-Queries oder nicht (das sind auch nur Formatanweisungen, die halt von einer Bedingung abhängen) hat das nichts zu tun. Du hast einfach eine Styleanweisung, die Deinem Element sagt, daß es unter bestimmen Umständen eine andere Farbe bekommt. Wie das passiert sagt Dir Dein Browser.

Im Anschluss an meine Eingabe folgt ein langes Kapitel, das ich aber schon länger auskommentiert hatte. Kann das evtl. einen Einfluss haben?

Wenn es wirklich auskommentiert ist, nicht. Aber vielleicht hast Du ja da einen Fehler drin. Vor allem, Du mußt ja wissen, ob Du irgendwann einmal irgendetwas mit violetter Schrift gemacht hast…

[Matthias Apsel]

Hallo Jochen Pöting,

@media (max-width: 768px) {

Ich hoffe auf einen Tipp.

Das ist keine gute Media-Query. Entscheide nach dem Inhalt^[1], nicht nach irgendwelchen Fantasiebreitenangaben und lege die media-query in der Einheit em fest.

Bis demnächst
Matthias

---

1. Z. B. Wann passt die Überschrift nicht mehr in eine Zeile? ↩︎