@media versteckte und sichtbare mobile & Desktop

Question

Ich bin brandneue @ media Abfragen und nur damit zu tun, wenn meine Joomla-Seite wurde nicht korrekt auf Handy und Tablet angezeigt. Ich habe so viel gelesen, wie ich finden konnte, aber immer noch ein Problem mit einem Desktop-Hintergrund und einem Header-Bild, das auf Tablets und mobilen Geräten nicht angezeigt wird. Was ich verstehe, ist, dass es im css-Code Parameter für die diff-Breite gibt, wie die Site aussehen wird. Ich habe meinen Code (tausende Male) durchgelesen und versucht, die Bilder auf Tablets und Handys sichtbar zu machen, indem ich zum img-Code die Sichtbarkeit hinzufüge: visible statement: so img { visibility: visible; Breite: Auto; Höhe: Auto; maximale Breite: 90%; } Es macht keinen Unterschied

Was ich frage mich, und dieser Teil verstehe ich nicht, wenn es mit dem Code vor @media gesetzt zu tun hat (max-width: 480px), die das verursacht Bilder werden nicht angezeigt. Dieser Code: @media (min-width: 768px) und (max-width: 979px) {

.hidden-desktop { 
    display: inherit !important; 
} 
.visible-desktop { 
    display: none !important; 
} 
.visible-tablet { 
    display: inherit !important; 
} 
.hidden-tablet { 
    display: none !important; 
} 
} 

@media (max-width: 767px) { 
.hidden-desktop { 
    display: inherit !important; 
} 
.visible-desktop { 
    display: none !important; 
} 
.visible-phone { 
    display: inherit !important; 
} 
.hidden-phone { 
    display: none !important; 
} 
} 

Bitte kann mir jemand helfen, das zu verstehen, was ich change..there kann, ist nicht alles dass ich mich vor dem Handy oder Tablet verstecken und die Größe der Bilder eher neu einstellen möchte, als sie nicht zeigen.

Answer 1

Ich habe das auch schon mal probiert, obwohl @media (max-width: 767px) technisch funktionieren sollte.

@media Bildschirm und (max-Breite: 767px) könnte eine Abhilfe sein, es funktioniert immer für mich.

Und auch sicherstellen, dass Sie den Meta-Tag in Ihren HTML-Seiten-Header enthalten haben:

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