Search code examples
htmlcssresponsive-designmaterial-design-lite

Material Design Lite responsive CSS not working on a Mobile/Tablets or in the Chrome DevTools emulator

When experimenting with the responsive features of Google's Material Design Lite, this code hides messages as expected when resizing the browser window, but when I look at my page in Chrome DevTools device emulator or on an actual device, it only shows the "Desktop" version. How do I fix my HTML?

<html>
  <head>
     <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
  </head>
  <body>
       <div class="mdl-cell--hide-phone mdl-cell--hide-tablet">
          You are on a desktop
       </div>
       <div class="mdl-cell--hide-desktop mdl-cell--hide-tablet">
          You are on a phone
       </div>
       <div class="mdl-cell--hide-desktop mdl-cell--hide-phone">
          You are on a tablet
       </div>
  </body>
</html>
Solution

  • To fix MDL not scaling for different devices, add this line inside your HTML's <head> :

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