How to adapt my css code to all screen sizes - html

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>