title: Conditional image width - responsive
body: <p>I currently am happy with my image size on a desktop. It's set to 50%. But when I view the image on my phone, it's way too small. I'm wondering how do I set image to be 100% if it's on a mobile device but 50% on desktop.</p>
  
  <p><a href="http://codepen.io/anon/pen/NxLvEQ" rel="nofollow">http://codepen.io/anon/pen/NxLvEQ</a></p>
  
  <pre><code>&lt;img class="featuredImg" src="http://bandwagonbible.azurewebsites.net/Stories/NFLBeginnersGuide/Image1.JPG" width="50%"/&gt;
  </code></pre>
  
  <p>I've tried this method but specifying px I think isn't really idea.</p>
  
  <pre><code>img
  {
      max-width: 50%;
      min-width: 300px;
      height: auto;
  }
  </code></pre>