Media Querys

**Steffen123** · 22.01.2015, 08:46

Hallo zusammen,

ich habe eine Frage.
Ich habe auf einer älteren Contao Seite Version 2.11.6 versucht Media Querys einzubinden.
Also einen neuen Stylesheet angelegt : responsive-320 und bei Media-Query {max-width:320px}.
Bei Medientypen habe ich all und eingebunden habe ich es auch.
Nur funktioniert es nicht.
Kann mir jemand sagen was ich falsch mache, oder auf was ich achten muss?

lg
Steffen

**schman** · 22.01.2015, 10:32

Also wenn du sie wirklich mit den {} Klammern gemacht hast kann es nicht funktionieren. Ein Media Query sieht folgendermaßen aus

PHP-Code:


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

#container {

        width: 100%;

        background: #aaa;

}

Einleiten muss du das ganze mit @media anschließend für wen die Bedingung gilt und dann in normalen Klammern das CSS Property welches abgefragt werden soll.

**Steffen123** · 22.01.2015, 16:04

Hallo schman,
danke für die schnelle Antwort.
Sorry habe mich vertippt, sollte so aussehen : (max-width:320px).
Laut Video ( Contao 3 das große Training ) kann ich im Backend so ein neues Stylesheet anlegen.
Habe ein Bild angehangen.
Bei einer anderen Seite hat das so funktioniert, oder ist das weil es sich bei dieser Seite um Contao Version 2.11.6 ?

**Steffen123** · 22.01.2015, 22:54

Wenn ich aus max-width -> min-width mache funktioniert es ???

**Steffen123** · 22.01.2015, 23:57

ok ich gehe schlafen, weis nicht mehr weiter :-)
Wenn ich die Seite auf die angegebene Größe verkleinere ( Resezier ) funktioniert es sowohl bei min als auch bei max-width, aber nicht auf meinem iPad und Handy ???

Gute Nacht……

**denniserdmann** · 23.01.2015, 07:48

Moin Steffen,

bei älteren Contao-Versionen wird, soweit ich mich erinnern kann, der Metatag Viewport standardmäßig noch nicht mit ausgeliefert. Probier mal

HTML-Code:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

in deinem Seitenlayout unter Zusätzliche <head>-Tags einzubinden. Der Metatag Viewport sorgt dafür, dass Smartphones und Tablets überhaupt erst auf MediaQueries zurückgreifen und die Website nicht einfach runterskalieren.

Grüße,
Dennis