Problem mit media queries in stylesheets

[Fr3ddy]

Hi,

ich habe ein relativ responsives layout, dass die haupt css datei in contao schon hergibt.
Jetzt habe ich mir eine zweite css datei angelegt, um eine mobile navigation zu erstellen, der stylesheet wird in der css datei angezeigt aber er wird nicht ausgeführt:

Normales layout:

@media screen and (min-width : 621px){
/* Style sheet layout-landingpage-1column_big_events */
.big_event #header{height:50px;background:none}.big_event .custom{margin-top:-79px}#header .inside{background:none}.big_event #header .inside{width:100%;height:50px;background-image:url("../..

Mobile layout:

@media screen and (min-width : 320px)  and (max-width : 620px){
/* Style sheet layout-landingpage-1column_big_events_phone */
.big_event .top_event_nav{display:none}body{background-color:#fff}
}

Klappt aber nicht, vielleicht haut auch irgend etwas nicht mit meinem grundverständnis hin. Ich möchte, dass wenn die breite kleiner als 620px ist, dass dann der mobile stylesheet greift, aber so wie unten beschreiben klappt es nicht.

 

[Frucht]

Hallo,
probier mal folgendes:
@media screen and (min-width : 320px) {
/* Style sheet layout-landingpage-1column_big_events_phone */
.big_event .top_event_nav{display:none}body{background-color:#fff}
}

Ab 612px width greift dann dein normales Layout.


lg frucht

 

[Trüffelkrieger]

Was heißt: "Klappt nicht"? Wird es nur auf dem mobilen Endgerät nicht angezeigt, oder tut sich auch nichts, wenn du das Browserfenster auf dem Pc kleiner ziehst?

 

[jumbo125]

Wenn du es Mit dem iphone testest musst du webkit-Ratio: 2 nehmen, da dass. Retina Display 2 Pixel in eines packt. Daher hat es 640px 960px

Hoffe das hilft

Ps: wenn du mehrere verschiedene Größen hast, welche das gleiche Stylesheet verwenden sollen kannst du einen Neistrich nutzen

Media Screen and max-width::320üx, Screen and irgendwas andereas

Geschrieben mit iphone