How do I make my centered div with a max width use a viewport so that it appears full-width on mobile devices?

How do I make my centered div with a max width use a viewport so that it appears full-width on mobile devices? I have looked around and see examples of this but cannot tell what I am doing that makes this not work

My code is provided, thank you.

<html>
  <head>
    <title>
      mxwl
    </title>
    <style>
    .container {
    margin: auto auto 0;
    max-width: 500px;
    padding: 30px;
    }
    </style>
      <meta name="viewport" content="initial-scale=1">
  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

Answers


@media (max-width: 500px){
    .container{
         margin: auto auto 0;
         width: 100%;
         padding: 30px;
         max-width:100%;
     }
}

Try and replace your code with the above code.I think i'll work


Need Your Help

Session variables, classes and back button

php mysql class session

Hi everyone I've done research and i can't seem to figure out what my code is doing. I know that session variables should change unless changing them or removing them. I don't think the issue is

Smugmug uploading image API v2 using PHP & Curl

php curl upload

Im trying to upload an image to Smugmug using the Upload API v2.