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

Question

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>

Answer 1

@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

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

Question

1 answers

solution1
0

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

Question

1 answers

solution1 0

solution1
0