Search code examples
htmlcssviewportvisual-glitch

Animate.css Messing Up My Site

I've been toying around with animate.css and it has completely messed up my website. I'm not sure of the cause at all. Also I would like the animation to only happen when the div is in the view-port and I'm not sure how to do so.

https://road-aware.herokuapp.com/

Solution

  • Change your .landing-container to:

    .landing-container {
  text-align: center;
  position: relative;
  top: 50%;
  padding: 15px 0;
  box-sizing: border-box;
  width: 80%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: auto;
  display: block;
}

    Changing the position makes sure the element centers vertically. Removing left: 50% and adding margin: auto centers it horizontally. Adding the display: block makes the two above possible.