Search code examples
cssresponsive-designmedia-queriesresponsive

CSS Media Query and Mobile

I'm trying to make different dimension of one modal.

If I resize in the Browser the change is what I want.

enter image description here

But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.

enter image description here

I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.

I would like to know why my "default" case is not working for mobile.

The code can be found here.

Solution

  • Try adding viewport meta tag in the head of the document:

    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
     <!-- ... -->
  </body>
</html>