How to adapt my css code to all screen sizes

Question

I am trying to animate the joining of two text halves. I came up with this code, but it doesn't adapt to different screen sizes, what can I do to fix it?

 .ab { position: relative; animation-name: ab; animation-duration: 10s; animation-iteration-count:1; animation-direction: alternate;} @keyframes ab { 0% {left:0px; top:0px;} 25% { left:350px; top: 0px;} }.ba { text-align: right; position: relative; animation-name: ba; animation-duration: 10s; animation-iteration-count:1; animation-direction: alternate;} @keyframes ba { 0% { right:0px; top:0px;} 25% {right:350px; top: 0px;} }.column{ float: left; margin: 10px; width: 45%; }

 <div class='row'> <div class="ab column"> Bienvenue </div> <div class="ba column"> deuxieme </div> </div>

Answer 1

You have to use a responsive unit of measure. px is not one of those. I used % in my example here:

Watch out: I had to use transform: translate to fully align the absolute positioned items.

// this ACTUALLY centers the element
.absolute-item{
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0); // translate(x, y)
}

 .row{ width: 100%; background: #333; height: 50px; border-radius: 10px; color: white; font-family: sans-serif; position:relative; }.column{ position: absolute; top: 50%; }.ab{ color: green; animation: ab 2s ease-in-out infinite alternate; }.ba{ color: red; animation: ba 2s ease-in-out infinite alternate; } @keyframes ab { 0% { left: 5%; transform: translate(0%, -50%); } 100% { left: 50%; transform: translate(-50%, -50%); } } @keyframes ba { 0% { right: 5%; transform: translate(0%, -50%); } 100% { right: 50%; transform: translate(50%, -50%); } }

 <div class="row"> <div class="ab column">Bienvenue</div> <div class="ba column">deuxieme</div> </div>