1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Problem mit Media Query (Breakpoint)

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von dsn, 13 November 2017.

  1. dsn

    dsn Neues Mitglied

    Registriert seit:
    13 November 2017
    Beiträge:
    3
    Punkte für Erfolge:
    1
    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: 13 November 2017
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    450
    Punkte für Erfolge:
    43
    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 (text):
    1. @media only screen and (max-width: 768px) {
    2. }
    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 (text):
    1. @media only screen and (min-width: 350px) and (max-width: 768px) {
    2.    //Die media-queries werden Aktiv, AB einer Größe von 350px BIS zu einer Größe von 768px!
    3. }
     
    dsn gefällt das.
  3. dsn

    dsn Neues Mitglied

    Registriert seit:
    13 November 2017
    Beiträge:
    3
    Punkte für Erfolge:
    1
    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.
     
  4. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    697
    Punkte für Erfolge:
    43
    Hallo dsn, ich stimme dir zu: Es ist ein brauchbares Verfahren, zunächst das CSS für ein Medium zu setzen, in deinem Fall mobil, und dann mit einer Mediaquery, in deinem Fall mit min-width, die abweichenden Formatierungen für das andere, bei dir Desktop, zu machen.
    Warum es bei dir nicht funktioniert, hat einen anderen Grund: Deine Mediaquery wirkt (evtl. u. a.) auf #p-inhalt p. Der Hintergrund ist jedoch für das Element .p-vor-1 definiert. Du musst dieses Element in die Mediaquery einbeziehen und dort den Hintergrund ändern.
     
    dsn gefällt das.
  5. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.411
    Punkte für Erfolge:
    63
    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 (text):
    1.  
    2. .col-12 {width: 100%;}
    3. }
    4. .p-vorteile div {
    5.  
    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
     
    dsn gefällt das.
  6. dsn

    dsn Neues Mitglied

    Registriert seit:
    13 November 2017
    Beiträge:
    3
    Punkte für Erfolge:
    1
    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!