title: CSS - Logo image stretched out of position only in Firefox
body: <p>I have a particle-slider effect for a logo on a site which transitions to a flat logo image file for screen sizes less than 960px. It works fine on Safari and chrome but on Firefox the image stretches out of shape. </p>
  
  <p><strong>Safari/Chrome</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cOL36.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cOL36.png" alt="Chrome/Safari"></a></p>
  
  <p><strong>Firefox</strong>
  <a href="https://i.stack.imgur.com/dGnQC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dGnQC.png" alt="Firefox"></a></p>
  
  <p>Do I need to add some specific code for Firefox to make this work? </p>
  
  <p>Here's how I have the code at the moment - </p>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>/* RWD for logo */
  
  @media screen and (max-width: 960px) {
  
  
      #particle-slider {
          display: none;
      }   
  
  }
  
  
  @media screen and (min-width: 960px) {
  
       #logo img {
  
          display: none;
      } 
  
  }
  
  
  @media screen and (min-width: 320px) and (max-width: 960px) {
  
                  #logo {
  
                      height: auto;
  
                  }
  
                    #logo img {
  
                      width: 70%;
                      height: 30%;
                      position: relative;
                      top: 50px;
                      padding-bottom: 50px;
                      left: 15%;
  
                    }
  
  
  }
  
  /* ----------------------------------------- */
  </code></pre>
  
  <p><strong>particle-slider.php</strong></p>
  
  <pre><code>&lt;?php /* Template Name: particle-slider */ ?&gt;
  &lt;!-- particle-slider template --&gt;
  
      &lt;div id="particle-slider"&gt;
          &lt;div class="slides"&gt;
              &lt;div class="slide" data-src="&lt;?php echo home_url(); ?&gt;/wp-content/uploads/2017/10/havoc_logohight.png"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;canvas class="draw" style="width: 100%; height: 100%;"&gt;&lt;/canvas&gt;
       &lt;/div&gt;
       &lt;script type="text/javascript"&gt;
          var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
      &lt;/script&gt;
    &lt;div id="logo"&gt; &lt;img src="&lt;?php echo home_url(); ?&gt;/wp-content/uploads/2017/10/havoc_logo.png"&gt; &lt;/div&gt;
  
    &lt;!-- particle-slider template --&gt;
  </code></pre>
  
  <p>This has only appeared as an issue after I loaded the front-end files onto a Wordpress CMS (I'm using a HTML5 Blank Child theme), they worked fine as a stand-alone front-end site. How do I fix this?</p>