• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Problem mit Media Query (Breakpoint)

dsn

Neues Mitglied
Hi,

ich bin seit letzter Woche dabei eine responsive Webseite mittels HTML & CSS zu schreiben, nur leider komme ich mit den sogenannten Medie Queries nicht klar.

In CSS habe ich für die Darstellung auf dem PC folgenden Code hinzugefügt:
@media only screen and (min-width: 768px)

Auf meinem Handy wird jedoch die Formatierung angezeigt, welche für die PC-Ansicht gedacht ist.

Hier der Link zur Webseite: entfernt
- siehe Box in Rot (diese soll auf dem Handy in Grau dargestellt werden)

Vielen Dank im Voraus für Eure Hilfe!

Dusan
 
Zuletzt bearbeitet:
Werbung:
Naja ist ja auch ganz klar.
Du legst die media-queries ja nur mit min-width an. Das bedeutet, dass AB einer Bildschirmbreite von 768px die media-queries aktiviert werden. Richtig wäre es also:

Code:
@media only screen and (max-width: 768px) {
}

Also BIS zu einer Bildschirmbreite von 768px wird alles so angezeigt, wie es da drin steht.

Edit:
Es ist auch eine Kombination möglich:
Code:
@media only screen and (min-width: 350px) and (max-width: 768px) {
   //Die media-queries werden Aktiv, AB einer Größe von 350px BIS zu einer Größe von 768px!
}
 
  • Like
Reaktionen: dsn
Hi Aaron,

vielen Dank für die schnelle Antwort.

Es war jedoch von mir beabsichtigt, den Breakpoint so zu setzten, sodass alle sich darin befindenden Formatierungen erst bei der Desktopdarstellung in Kraft treten. Siehe meine CSS: mobile first

Alle anderen Formatierungen, die ich vor dem Media Query gesetzt habe, sollen folglich nur auf mobilen Geräten aktiv sein. Wenn ich jedoch dieselbe Klasse im Media Query mit min-widht:768px drin hab, wird diese trotzdem auch auf mobilen Geräten aktiv. Deshalb das Beispiel mit der roten Box.
 
Werbung:
Hallo

Die Webseite enthält jede Menge Fehler und veraltete Lösungen. Aber das ist nicht deine Frage.

Dein aktuelles Problem entsteht durch ein überflüssige Klammer im CSS:

Code:
.col-12 {width: 100%;}
}
.p-vorteile div {

Die zweite geschweifte Klammer nach "100%;" ist zuviel.

Dadurch werden die aktuellen Media Queries geschlossen und alle folgenden CSS-Anweisungen beziehen sich auf das gesamte CSS.

Gruss

MrMurphy
 
  • Like
Reaktionen: dsn
Das wird's wohl sein. Das war sogar mein erster Gedanke, konnte jedoch keine überflüssige Klammer finden. Jetzt seh ich's natürlich.

Vielen lieben Dank!
 
Zurück
Oben