Jochen Pöting: media query, befehl in violett?

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

  1. 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

    --
    Ήταν διασκεδαστικό όσο κράτησε.
    Χρύσιππος ὁ Σολεύς, 220 π.Χ.
  2. 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

    --
    sumpsi - posui - obstruxi
    1. 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

  3. 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…

  4. 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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.

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