Problem mit Media-Queries

[scbawik]

Hallo Leute!

Ich muss gerade eine Seite machen, die für Desktop-Geräte drei unterschiedliche Größen bereit hält.
Leider scheint klappt da irgendwas nicht, vielleicht entdeckt ja jemand von euch den Fehler:

Im Head-Bereich der index-Datei:

<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" />

In der Datei 'basic.css':

.logo {     
     position: absolute;
     height: 120px;
     width: 240px;
     left: 0px;
     top: 0px;
     z-index:100;
}
usw...

In der Datei 'responsive.css':

@media only screen and (max-width: 1245px) {

     .logo {
          height: 106px;
          width: 212px;
     }

     usw...

}

Wenn ich das Browser-Fenster nun unter 1245px skaliere, sollte doch die Klasse '.logo' eine neue Größe erhalten? Oder habe ich da etwas falsch verstanden?

Leider passiert garnix, die media-query scheint nicht ausgelöst zu werden.

Hoffe jemand von Euch kann mir helfen, Danke!!

 

[Donskelle]

Sieht mir richtig aus. Leg doch mal ne 2. media-query an.
Beispiel:
Edit this Fiddle - jsFiddle

 

[Tronjer]

Eigentlich schon. Was innerhalb deines Media Query steht, gilt für Breiten von 0 - 1245px.

Erstelle doch mal probeweise ein Query mit min-width: 1246px und verschiebe die Größenangaben aus der basic.css dort hin.

 

[scbawik]

Oh Mann, jetzt ist mir aber auch ein blöder Fehler unterlaufen.

Hatte vor dem

@media

einen Kommentar, den ich nicht CSS-valide formatiert hatte:

// Medium Size

Daran haben sich die Browser anscheinend aufgehängt :)

Danke troztdem, Tronjer