Problem mit media queries in stylesheets

[Steve_0]

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 cssdatei angezeigt aber er wird nicht ausgeführt:

main css

@media screen and (min-device-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("../../tl_files/test/layout/big_event_bg.png");margin: auto !important;padding: 0 30px;background-size: 1000px 4px;z-index: 101}.big_event .top_event_nav{width:41%;min-width:402px;max-width:582px;float:right;margin-right:30px}}

mobile css

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

Wieso wird da nicht in die mobile ansicht gewechselt?

LG & danke

[willshedo]

Womit hast du denn die mobile Version überhaupt getestet?
Um das per Browserfenster-verkleinern auf die Schnelle testen zu können, solltest du 'max-device-width' gegen 'max-width' austauschen, min ebenso.

[Steve_0]

Klappt auch 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.

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}
}

[Steve_0]

Momentan habe ich es:

@media screen and (max-width: 620px), screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) and (max-width: 480px){
/* Style sheet layout-landingpage-1column_big_events_phone */
.big_event .top_event_nav{width:100%;min-width:100%;max-width:100%;float:none;margin-right:0}.big_event .top_event_nav ul li{width:100%;min-width:100%;float:none;padding: 14px 10px 10px 10px}
}

@media screen{
/* 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("../../tl_

Komischerweise wird das css für die mobileansicht nur im browser erkannt, wenn sie vor dem standart layout steht aber so überschreibt das standart layout ja immer das mobile layout, siehe anhang.

Was kann ich da machen?