title: How to change size of image based on screen size?
body: <p>I want a banner to be displayed over 50% of the width of a large screen (desktop) and 100% of the width on a small screen (iphone).</p>
  
  <p>At the moment the image is displayed over 50% of the screen for every device:</p>
  
  <pre><code>.advert-img {
      width: 50%;
      height:auto
  }
  </code></pre>
  
  <p>How can I vary the width based on screen size?</p>
  
  <p>Is this possible with all browsers? i.e. old blackberry browser</p>