title: How do I make a gif responsive?
body: <p>I want to make a gif image responsive to resize it to cover the width of every mobile device. This is because for some reason I can get a video to autoplay in certain IOS devices, so I though of converting the video into a gif. Now, how can I make it responsive? I don't really care about the height, is more of a width problem.</p>
  <p>this is my oode so far:</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>.box {
    width: 500px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;img src="examplegif" alt="Example gif" style="width:340px;height:170px;"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>