CODEWITHSUNDEEP
htmlcssmedia-queries
Kevin
Kevin

Reputation: 1195

Extremely basic media query not working on mobile

This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta title="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div {
      width: 50%;
      float: left;
    }

    @media screen and (max-width: 500px) {
      div {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div>Left</div>
  <div>Right</div>
</body>
</html>

My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.

My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.

Am I going nuts?

Upvotes: 0

Views: 54

Answers (1)

Kevin
Kevin

Reputation: 1195

Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:

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

Upvotes: 1

Related Questions