CODEWITHSUNDEEP
htmlcss
Yusuf
Yusuf

Reputation: 95

Need help positioning 2 svg icons

My problem is the github and linkedin icons overlay each other and leave the frame when I resize the browser.

If you could make the icons and h1 text grouped so they stay a certain distance from each other it would be great and stay in the same position and size relative to browser size.

Here is the JSFiddle link:

https://jsfiddle.net/vc7up2o4/5/

the main code

h1 {
  top: 0;
  vertical-align: middle;
  position: absolute;
  margin-left: 40%;
}

@keyframes mymove {
    0%   { opacity:0%;}
    50% {top: 20%; opacity: 1%;}
 /* this is what positions the icons ^ */
    100% { top: 10%; opacity:100%;}
     }

.github {
  position: fixed;
  -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
  animation: mymove 2s ;
  animation-fill-mode: forwards;
  animation-delay: 6s;
  opacity: 0;
  width: 9%;
 margin-left: 43%;
}

.linkedin {
  position: fixed;
  margin-left: 38vw;
  -webkit-animation: mymove 5s;  /* Safari 4.0 - 8.0 */
  animation: mymove 2s;
  animation-fill-mode: forwards;
  animation-delay: 6s;
  opacity: 0;
  width: 9%;
}

This is the shortest code I could do.

Upvotes: 3

Views: 70

Answers (1)

Ben
Ben

Reputation: 636

An easy way to achieve what you want is to use flex positionnement: see https://developer.mozilla.org/fr/docs/Web/CSS/flex

.social {
  display: flex;
  flex-direction: row;
  animation: moveUp 2s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  opacity: 0;
}

.social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 60px;
  padding: 10px;
}

Here is a complete JS fiddle: https://jsfiddle.net/cyemjxur/3/

Upvotes: 1

Related Questions