title: Browser Dependent Image Resizing
body: <p>So, I have the code below and ideally the goal is to have any images present hit a maximum width of 120px for browsers with viewports of 641px+ and then only a maximum width of 27px. The odd part is that if I remove the resizing coding and put it in a separate code block at the bottom of my site it will resize all images on the page, but not how it's supposed to. When I remove the  portion of coding, the coding seems to try and work a little more, but not exactly. Maybe there's a different way to do the resizing coding?</p>
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;style&gt;
        @media screen and ( min-width: 641px ){
          img {
            width: 120px;
            height: auto;
          }
        }
        @media screen and ( max-width: 640px ){
          img {
            width: 27px;
            height: auto;
          }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
    &lt;!--VGC Year--&gt;
        &lt;p style=&quot;font-size: 30px&quot;&gt;
          &lt;b&gt;
            VGC 2015
          &lt;/b&gt;
        &lt;/p&gt;
  
    &lt;!-- Acronym--&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;b style=&quot;font-size: 20px&quot;&gt;
            CHALK - - - 
          &lt;/b&gt;
        &lt;/td&gt;
  
    &lt;!--Arconym Pokemon--&gt;
        &lt;td&gt;
          &lt;img src=&quot;https://www.serebii.net/art/th/488.png&quot;&gt;
        &lt;/td&gt;
        &lt;td&gt;  
          &lt;img src=&quot;https://www.serebii.net/art/th/485.png&quot;&gt;
        &lt;/td&gt;
        &lt;td&gt; 
          &lt;img src=&quot;https://www.serebii.net/art/th/591.png&quot;&gt;
        &lt;/td&gt;
        &lt;td&gt; 
          &lt;img src=&quot;https://www.serebii.net/art/th/645-s.png&quot;&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;img src=&quot;https://www.serebii.net/art/th/115-m.png&quot;&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;!--Arconym descption--&gt;
        &lt;p&gt;
          This acronym refers to a five Pokemon core consisting of Cresselia, Heatran, Amoonguss, Landorus-Therian, and Mega Kangaskhan with the sixth and final Pokemon being up to a Trainer's personal preference. This sixth Pokemon was typically added on to the end of the acronym and was considered a variant on this standard core. For example, Thundurus-Incarnate was a popular sixth option resulting in the term CHALK-T.
        &lt;/p&gt;
  
    &lt;!-- Acronym--&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;p style=&quot;font-size: 20px&quot;&gt;
              &lt;b&gt;
                Japan Sand - - - 
              &lt;/b&gt;
            &lt;/p&gt;
          &lt;/td&gt;
  
    &lt;!--Arconym Pokemon--&gt;
          &lt;td&gt;
            &lt;img src=&quot;https://www.serebii.net/art/th/373-m.png&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;img src=&quot;https://www.serebii.net/art/th/248.png&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;img src=&quot;https://www.serebii.net/art/th/530.png&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;img src=&quot;https://www.serebii.net/art/th/591.png&quot;&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;!--Arconym descption--&gt;
        &lt;p&gt;
          Japan Sand was a team popularized in Japan - hence the name - and almost always featured the four Pokemon core of Mega Salamence, Tyranitar, Excadrill and Amoonguss. A common fifth Pokemon added to the team was Belly Drum Huge Power Azumarill to pair with Amoonguss.
        &lt;/p&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>