CSS Media query geht nicht richtig?

14.05.2021, 22:56

HTML code:<html>

  <head>

    <title>Hallo</title>

    <link href="style.css" rel="stylesheet">

  </head>

  <body>

    <div id="handy-hallo">

      <h1>Hallo Handys</h1>

    </div>

    <div id="hallo">

      <h1>Hallöle</h1>

    </div>

  </body>

</html>

CSS code:

#handy-hallo{

  display: none;

}

@media (max-width: 800px){

  #hallo{

    display: none;

  }

   

  #handy-hallo{

    display: block;

  }

}

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, IT
14.05.2021, 23:16

Bei solchen Fragen sollte man grundsätzlich immer den eigenen Quellcode mit angeben bzw. auf diesen verlinken, damit mögliche Fehler überhaupt ausfindig gemacht werden können. So ist es im Grunde wie die Suche nach der Nadel im Heuhaufen. Nachfolgendes gilt allgemein und nicht zwingend dein Problem löst.

  1. Validiere dein HTML Markup und CSS, behebe ggf. angezeigte Fehler
  2. Mach dich mit dem Mobile-first Konzept vertraut
  3. Schau in die Dokumentation und/oder lese ggf. entsprechende Fachartikel
Ich muss bei max- und min-width mindestens 1000px eintragen

Bei Media Queries handelt es sich immer um Eigenschaften, die nur in einem bestimmten Fall zugewiesen werden sollen. De facto also nicht für ein bestimmtes Gerät, sondern für einen Viewport von X, Y oder X bis Y. Ich habe dir nachfolgend mehrere unterschiedliche Media Queries als Snippet angehängt.

CSS:

/* 599px or less */
@media (max-width: 599px) {...}

/* 599px or higher */
@media (min-width: 599px) {...}

/* 599px or between 599px and 700px */
@media (min-width: 599px) and (max-width: 700px) {...}

Da du inzwischen deinen Quellcode nachgereicht hast, sollte das Problem eigentlich schon mit dem Meta-Tag Viewport behoben sein. Füge also folgendes zum Kopfbereich <head> deines HTML Dokuments hinzu.

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">
Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer
verreisterNutzer  16.05.2021, 12:07

Hallo,

das Problem lag darin, dass Chrome´s Mobile device toolbar nicht richtig funktionierte.

Als ich es auf einem anderen Computer getestet habe, ging es.

Vielen Dank trotzdem

0