title: @media with width: 100%
body: <p>Alright, so I'm attempting to use @media tags to replace the photo displayed by an element when the element reaches a certain width, I originally had the width set to 100%, however, I've read that it could cause responsiveness issues so I changed it to max-width and min-width, however, no change anyway here is the code.</p>
  
  <p>Note: I checked the width of the element using inspect element on chrome and .container was reaching 767px on a downscale so I don't think the element not changing width is the problem</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,html {
    margin: 0;
    height: 100%;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 1920px) {
      
    .container {
      min-width: 768px;
      max-width: 1920px;
      height: 100%;
      background-image: url('https://images.pexels.com/photos/214519/pexels-photo-214519.jpeg?w=1260&amp;h=750&amp;auto=compress&amp;cs=tinysrgb');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    };
  };
  @media only screen and (min-width: 300px) and (max-width: 767px) {
    .container {
      min-width: 300px;
      max-width: 767px;
      height: 100%;
      background-image: url('https://images.pexels.com/photos/159146/train-cargo-bow-river-banff-159146.jpeg?w=1260&amp;h=750&amp;auto=compress&amp;cs=tinysrgb');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    };
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
  &lt;div class="container"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>