Fading in words are not responsive - html

Question

I am new in web development.I'm making a website for a client for the first time.My fading in words "INNOATIVE.....EDUCATION" crashes into each other when I make my window smaller.I want them to be responsive, to stay in one line but get smaller in size.I would appreciate if anyone can help me.
https://jsfiddle.net/dL9m41se/
Ralevant CSS:
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
margin-right: auto;*/
/*width: 10%;
height: 3%;*/
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-left: 12%;
/* margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;
}*/
}
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.box{
padding-left:8%;
width: 16.7%;
height: 5%;
position: relative;
margin: .8%;
float: left;
overflow:inherit;
/*border: 1px solid #333;
background: #999;*/
}

Answer 1

An option would be to use viewport units vw for the font size
font-size: 2.5vw;
Sample snippet
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
margin-right: auto;*/
/*width: 10%;
height: 3%;*/
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-left: 12%;
/* margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;
}*/
}
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.box{
padding-left:8%;
width: 16.7%;
height: 5%;
font-size: 2.5vw;
position: relative;
margin: .8%;
float: left;
overflow:inherit;
/*border: 1px solid #333;
background: #999;*/
}
<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/1.jpg">
<div class="caption">
<div class="center-div-words" >
<h1> <span style="color: #000;font-family: 'Special Elite', cursive; ">CENTER FOR MEMBRANE STUDY</span></h1>
<p style="font-size: 100%;font-family: 'Special Elite', cursive;"><span class="box fade-in one" id="1">INNOATIVE</span><span class="box fade-in two" id="2">COLLABORATIVE</span><span></span><span class="box fade-in three" id="3"> INTERDISCIPLINARY</span><span class="box fade-in four" id="4">RESEARCH</span>
<span class="box fade-in five" id="5">EDUCATION</span>
</p>
</div><!-- center-div-words -->
</div> <!-- caption -->
</div> <!-- image -->
</div><!--/#home-slider-->

Answer 2

Add this to your css, now the words won't cross.
Responsive wise it's better that you place them under each other.
Keeping them inline isn't the best practice responsive wise.
Adjust the max-width as you please of course.
#media screen and (max-width: 600px){
.box{
width:100%;
}
}
If you do want to keep them inline, let me know and I'll do some more tweaking!

Answer 3

One way you can go about this is adding in media queries to set max-widths so that it can only go so small.
#media only screen and (max-width: 480px) {
/* This CSS will be applied only to phones and other small devices. */
font-size: 20px; width: 100%; }
//Lots more can be done in there
You could also play around with flexBox to help.
<script type="text/javascript">
$('#mainNavbar').flexMenu();</script>
And checkout this page here. It has a small tutorial on responsive navbar design/creation.

Answer 4

You can reduce font-size after certain width with a #media query (adjust values to your benefit, demo is set to 16px):
#media (max-width: 768px) {
p span {
font-size: 16px;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
/* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
margin-right: auto;*/
/*width: 10%;
height: 3%;*/
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-left: 12%;
/* margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;
}*/
}
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.box {
padding-left: 8%;
width: 16.7%;
height: 5%;
position: relative;
margin: .8%;
float: left;
overflow: inherit;
/*border: 1px solid #333;
background: #999;*/
}
#media (max-width: 768px) {
p span {
font-size: 16px;
}
}
<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/1.jpg">
<div class="caption">
<div class="center-div-words">
<h1> <span style="color: #000;font-family: 'Special Elite', cursive; ">CENTER FOR MEMBRANE STUDY</span></h1>
<p style="font-size: 100%;font-family: 'Special Elite', cursive;"><span class="box fade-in one" id="1">INNOATIVE</span><span class="box fade-in two" id="2">COLLABORATIVE</span><span class="box fade-in three" id="3"> INTERDISCIPLINARY</span><span class="box fade-in four" id="4">RESEARCH</span>
<span class="box fade-in five" id="5">EDUCATION</span>
</p>
</div>
<!-- center-div-words -->
</div>
<!-- caption -->
</div>
<!-- image -->
</div>
<!--/#home-slider-->