3.3.x Media Queries und mobiles Layout werden nicht erkannt

Hallo zusammen

ich bin hier an einer momentan noch einfachen Landingpage als Teaser für die eigentliche Page dran.
Jetzt funktioniert soweit eigentlich alles ganz gut, ich will die Page aber für alle Bildschirmgrössen flexibel halten, weshalb ich bei den jeweiligen Breakpoints mit Media Queries die Schriftgrössen angepasst habe.
So weit so gut, das funktioniert bis zu einem gewissen view point und danach greifen die Media Queries irgendwie nicht mehr.
Ich wollte eigentlich bei Bildschirmgrössen unter 850px den Wrapper auf 100% stellen und die Inhalte auch Bildschirmfüllend skalieren. (90%)
Das funktioniert aber überhaupt nicht.
ich habe alle css @media only and (max-withxxx) richtig eingebunden, trotzdem greift das nicht.
Gibt es da irgend eine css die das verhindert ab einer gewissen Grösse?

Und die mobile Version scheint auch nicht zu greifen, dort sollte das genau gleich sein. Habe eine mobiles Seitenlayout erstellt und ein css für mobile und dieses fachgerecht eingebunden..:-) Sieht aber gar nicht gut aus auf einem iPhone.
Wenn ich im Seitenlayout die responsive css ausschalte wird zwar alles kleiner, aber das Logo verzieht sich und der Inhalt ist auch nicht Bildschirmfüllend.

Ich muss vielleicht noch sagen das ich beim Logo einen Hover Effekt mit zwei Bildern übereinander eingebaut habe, wo ich dem div die position relative und den Bildern die position absolut gegeben habe.
Damit der Nachfolgende Inhalt nicht unter die Bilder rutscht habe ich dem Bilder Div eine feste Höhe gegeben im em. Bei nachfolgenden Media Queries Stylesheets wo ich die Höhe verkleinern wollte, da der nachfolgende Inhalt sich zu weit von den Bildern entfernt, greift das aber auch nicht.

Sorry ich steh hier wohl auf einem dicken Schlauch..:-)

Falls sich jemand angesprochen fühlt und mir das Problem erläutern kann wäre ich sehr dankbar..

Die Page kann man hier ansehen:

http://gluecklichfestival.ch/index.p...valteaser.html

Ist es möglich, das ich hier die falschen Fragen stelle?
Wenn ich so sehe wie das läuft bei anderen, dann werden deren Fragen oft sehr schnell und ausführlich beantwortet.
Das ist mein zweiter Beitrag hier und beide Male habe ich keine Antwort auf mein problem bekommen. Vielleicht ist das Problem zu trivial oder ich stelle die Frage falsch?

Ich wäre um eine Antwort wirklich sehr dankbar, da ich das Problem anscheinend nicht selber lösen kann.
Also falls sich doch noch jemand angesprochen fühlt, ich wäre wirklich sehr dankbar für eine Antwort oder einen Hinweis auf wie ich sonst meine Frage stellen muss.

Grüsse Mike

Zitat:

---

Zitat von jazzhead

Ich wollte eigentlich bei Bildschirmgrössen unter 850px den Wrapper auf 100% stellen und die Inhalte auch Bildschirmfüllend skalieren. (90%)
Das funktioniert aber überhaupt nicht.

---

Hallo Mike
Mit Firebug zu sehen ist, dass deine layout.css, die als zweite eingebunden ist, die Breite von .festival_hover überschreibt.

Code:

---

.festival_hover {
    height: 38.75em;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 36.9048%;
}

---

Damit bekommt er nicht die Breite von 100% bei einem Viewport kleiner als 850px.

Hallo Uwe

vielen Dank erst mal für deine Antwort.
ich kapiers zwar gerade nicht 100%ig..:-)
Wie muss ich denn die css einbinden damit die sich nicht gegenseitig überschreiben?
ich habe im Seitenlayout die layout css zuoberst und die jeweiligen viewpoint Anpassungen je kleiner der viewpoint wird darunter gesetzt.
Muss ich das umgekehrt einbinden, also layout css zu unterst und den kleinsten viewpoint zuoberst?

Zitat:

---

Zitat von jazzhead

ich habe im Seitenlayout die layout css zuoberst und die jeweiligen viewpoint Anpassungen je kleiner der viewpoint wird darunter gesetzt.

---

Hallo Mike
So ist es eigentlich richtig. Die untenstehenden überschreiben die oberen.
Normalerweise sollte dann aber auch die Layout.css mit den anderen zusammengefasst werden. Hast du die Layout.css auch mit dem Contao-internen CSS-Editor gebaut?

Edit: Eventuell hat sich ab 3.3.x was geändert? Bin da noch nicht auf dem neusten Stand.

Das Problem ist, dass du die allgemeine Definition in einem externen Stylesheet hast, also die "Layout.css", die Media Queries machst du aber aus irgendeinem Grund dann nur über die internen Stylesheets. Die internen Stylesheets werden aber von Contao vor den externen Stylesheets im HTML source definiert. Entweder du gibst die Media Queries alle in deine Layout.css (zumindest die dafür relevanten) oder du gibst alles in die internen Stylesheets.

Danke Spooky für deine Antwort. Das hilft mir weiter...:-)