CODEWITHSUNDEEP
cssfirefoxresponsive-design
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Logo image stretched out of position only in Firefox

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.

Safari/Chrome

Chrome/Safari

Firefox Firefox

Do I need to add some specific code for Firefox to make this work?

Here's how I have the code at the moment -

style.css

/* 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%;

                  }


}

/* ----------------------------------------- */

particle-slider.php

<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->

    <div id="particle-slider">
        <div class="slides">
            <div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
        </div>
        <canvas class="draw" style="width: 100%; height: 100%;"></canvas>
     </div>
     <script type="text/javascript">
        var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
    </script>
  <div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>

  <!-- particle-slider template -->

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?

Upvotes: 0

Views: 634

Answers (1)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

Try is removing the height: 30% style from the img. I am guessing you want the image to retain its aspect ratio so height: auto might work better?

Upvotes: 1

Related Questions