@media funktioniert nicht?

[Angie007]

Hallo,

ich habe 2 Layouts auf der Seite. In einem funktioniert mein Code im anderen zeigt er keine Wirkung?

@media (max-width: 600px) {
#main{
width:100%;
bottom:80px;
top:100px;
position:static;
display:block;
padding:10px;
background-color:rgba(255,255,255,.85);
!important;
}
}
Hier funktionierst: http://www.zuchthof-pelzer.de/bengalkatzen-aktuell.html
Hier nicht: http://www.zuchthof-pelzer.de/

Danke im Voraus! Viele Grüße Angie

[Gassi]

Hey,

also bei mir gehts mit dem Firefox... laut Webdevoloper wird das main css auch ab 600px angezeigt....

Grüße Gassi

[mlweb]

Bei mir greift die mediaquery im Prinzip auch. #main wird auf beiden Seiten (bei beiden Layouts) bis zu einer Breite von 600px auf 100% gesetzt. background-color und padding dürften ohnehin entbehrlich sein - die ändern sich ja nicht soweit ich das gesehen habe.
Ansonsten empfehle ich etwas mehr Sorgfalt beim Schreiben des css oder etwas mehr Beschäftigung mit dem Selbigen

@media (max-width: 600px) {
#main{
 width:100%;
bottom:80px;
top:100px;
position:static;
display:block;
padding:10px;
background-color:rgba(255,255,255,.85);
!important;
     }
}

• bottom und top (und auch left und right) haben keine Wirkung bei statisch positionierten Elementen
• bottom und top gleichzeitig angegeben ist ohnehin kontraproduktiv
  es ist entweder widersprüchlich oder überflüssig
• !important geht nur in Zusammenhang mit einer Eigenschaft
  abgesehen davon, finde ich, dass !important meist ein Ausdruck von schneller, aber nicht durchdachter Lösung ist

Nachtrag: Stimmt nicht ganz - padding ändert sich zumindest bei der Seitte www.zuchthof-pelzer.de. Wird also doch benötigt.

[Angie007]

Danke, leider greift es bei Opera nicht. Komischerweise der selbe Code im 2 Layout schon?

Auch @media all hilft nicht

[mlweb]

Ich frag mich auch gerade wofür überhaupt zwei Layouts. Das unterschiedliche Hintergrundbild kann man doch über eine Klasse für die Seite lösen oder gibt es noch andere Unterschiede, die mir nicht aufgefallen sind?

[mlweb]

Danke, leider greift es bei Opera nicht.

Ich weiss ja nicht was und womit Du testest. Auch im Opera 39 unter Windows 10 funktioniert die mediaquery.

Im Übrigen, wenn Du hier über ein Problem berichtest, dass nur in einem Browser/unter einem Betriebssystem/auf einem bestimmten Gerät auftritt bzw. Du es nur dort getestet/beobachtet hast, dann solltest Du das auch von Anfang an so kommunizieren, das erleichtert die Hilfe enorm.

[Angie007]

Ja einige kleinere, Hintergrundfarbe z.B.
Hast aber sicherlich recht hätte man auch abkürzen können ...
Lernig by doing ...

[mlweb]

Ja einige kleinere, Hintergrundfarbe z.B.

So jetzt noch einmal, was greift in welchem Browser noch immer nicht?

[tab]

Eventuell mal alle Caches leeren, auch im Browser und komplett neu runterladen. Gerade CSS wird oft sehr hartnäckig gecached und man hat dann immer noch die alte, falsche Version im Einsatz. Oder es ist ein Browser, dem das vereinsamte "!important;" (ist aktuell immer noch drin) sauer aufgestossen hat, so dass er gleich die gesamte Regel oder gar das Stylesheet komplett nicht verwendet.