wow.js issue - In one section of site animation only works at mobile size

Question

On my website I have a section with 3 columns (with bootstrap), at the mobile size the stack on top of each other and line up next to each other at the bigger sizes. Now what it supposed to happen is that on scroll they should appear with the zoomIn animation. Which works but only at min-width: 300px. As soon as page reaches min-width: 480px the animation stops working and the content just appears instead of a smooth animation.

All the other content I have with wow.js works just fine at all the other sizes. It's only that specific section.

This is my HTML:

    <div class="portfolio">
  <h1> Portfolio </h1>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3>FOO1</h3>
        <a class="wow zoomIn" href="foo1" target="_blank"><img class="foo1" src="images/FOO1.png"/></a>
        <p>lorem ipsum 1</p>
        <p><span>Technologies used:</span> HTML, CSS, Javascript and jQuery</p>
        <hr />
      </div><!--END col-sm-4 FOO1-->
      <div class="col-sm-4">
        <h3>FOO2</h3>
        <a class="wow zoomIn" href="https://foo2.com/" target="_blank"><img class="foo2" src="images/foo2.png"/></a>
        <p>lorem ipsum2</p>
        <p><span>Technologies used:</span> JavaScript, Node.js, Express.js, Mongoose, MongoDB, HTML, CSS, jQuery, Bootstrap, Heroku</p>
        <hr />
      </div><!--END col-sm--4 FOO2-->
      <div class="col-sm-4">
        <h3>FOO3</h3>
        <a class="wow zoomIn" href="http://foo3.com" target="_blank"><img class="foo3" src="images/foo3.png"/></a>
        <p>lorem ipsum 3
        </p>
        <p><span>Technologies used:</span>
          Angular2, Node.JS, Express, Mongoose, MongoDB, HTML, CSS, jQuery,
          Heroku
        </p>
      </div><!--END col-sm-4 FOO3-->
    </div>
  </div>
</div><!--END portfolio div-->

This is my CSS for min-width: 300px and min-width: 480px:

@media(min-width:300px){
 .portfolio{
  /* Permalink - use to edit and share this gradient: 
  http://colorzilla.com/gradient-
  editor/#287dc8+0,75b4e5+46,7ba9e5+61,778be5+87,6a80e2+100 */
  background: #287dc8; /* Old browsers */
  background: -moz-linear-gradient(top, #287dc8 0%, #75b4e5 46%, 
  #7ba9e5 
  61%, #778be5 87%, #6a80e2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #287dc8 0%,#75b4e5 
  46%,#7ba9e5 61%,#778be5 87%,#6a80e2 100%); /* Chrome10-25,Safari5.1-6 
  */
 background: linear-gradient(to bottom, #287dc8 0%,#75b4e5 46%,#7ba9e5 
 61%,#778be5 87%,#6a80e2 100%); /* W3C, IE10+, FF16+, Chrome26+, 
 Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient(       
 startColorstr='#287dc8', endColorstr='#6a80e2',GradientType=0 ); /* 
 IE6-9 */
 box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}

.portfolio h1{
  margin-top: 30px;
}

.portfolio .container .row a img{
  max-width: 95%;
  margin: 15px 0px 15px 7px;
  border-radius: 5px;
  opacity: 1;
  transition: all 0.5s ease;
}

.portfolio .container .row a img:hover{
  opacity: 0.5;
  transition: all 0.5s ease
}

.portfolio .container .row h3{
  font-size: 24px;
  color: whitesmoke;
  font-weight: 400;
  margin-left: 5px;
}

.portfolio .container .row p{
  color: azure;
  padding: 5px;
  font-weight: 300;
  font-size: 17px;
}

.portfolio .container .row span{
  font-weight: 500;
}

.portfolio .container .row hr{
  margin: 17px;
}
}/*CLOSE min-width:300*/

@media(min-width:480px){
 .portfolio{
   padding: 18px 10px;
 }

 .portfolio .container .row p{
   font-size: 20px;
 }

 .portfolio .container .row h3{
   margin-bottom: 30px;
   font-size: 25px;
   color: azure;
 }

 .portfolio .container .row a img{
   display: block;
   margin: 0 auto;
   margin-bottom: 20px;
 }
}/*CLOSE min-width:480*/

I'm not really sure why it would stop working and I figured it must be a style I've put at the new size. All the other sizes, 768 and 1024 don't have any style changes to this section. I've changed the duration of animations to see if maybe I'm not seeing the animation but for sure it stops working right at 480. I've also tried different animations and using any other animation also makes the content just appear.

Any ideas as to why this only happens with this section?

Thank you!

UPDATE: I'm still not sure why exactly this happened but I fixed it by adding the wow zoomIn class to the image instead of the a tag - added asterisks so you can see where I moved the class, do not put them in your own code ;)

<div class="col-sm-4">
    <h3>FOO1</h3>
    <a href="foo1" target="_blank"><img class="**wow zoomIn** foo1" src="images/FOO1.png"/></a>
    <p>lorem ipsum 1</p>
    <p><span>Technologies used:</span> HTML, CSS, Javascript and jQuery</p>
    <hr />
  </div><!--END col-sm-4 FOO1-->
  <div class="col-sm-4">
    <h3>FOO2</h3>
    <a href="https://foo2.com/" target="_blank"><img class="**wow zoomIn** foo2" src="images/foo2.png"/></a>
    <p>lorem ipsum2</p>
    <p><span>Technologies used:</span> JavaScript, Node.js, Express.js, Mongoose, MongoDB, HTML, CSS, jQuery, Bootstrap, Heroku</p>
    <hr />
  </div><!--END col-sm--4 FOO2-->
  <div class="col-sm-4">
    <h3>FOO3</h3>
    <a href="http://foo3.com" target="_blank"><img class="**wow zoomIn** foo3" src="images/foo3.png"/></a>
    <p>lorem ipsum 3
    </p>
    <p><span>Technologies used:</span>
      Angular2, Node.JS, Express, Mongoose, MongoDB, HTML, CSS, jQuery,
      Heroku
    </p>
  </div><!--END col-sm-4 FOO3-->

wow.js issue - In one section of site animation only works at mobile size

0 Answers0