In the footer, I have six images with names that are displaying in two lines instead of a single line on smaller devices. For example, "s player" is shown as "s" above "player". How can I make it responsive to fix this issue?
.footer {
position: fixed;
bottom: 0px;
background-color: white;
height: 45pt;
width: 100%;
padding: 2pt 8pt;
border-top: 1pt solid #f3f3f4;
}
span {
font-family: Segoe Script;
}
.super {
color: #9400D3;
text-size-adjust: inherit;
}
.duper {
color: #4B0082;
}
.champ {
color: #0000FF;
}
.good {
color: #FF7F00;
}
.hero {
color: #FF0000;
}
.king {
color: #00BD13;
}
<div class="footer">
<div class="row">
<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="/images/abc.svg" alt="Player1">
<div><span class="super">s</span> Player</div>
</div>
<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="/images/bcd.svg" alt="Player2">
<div><span class="duper">d</span> Player</div>
</div>
<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="/images/cde.svg" alt="Player3">
<div><span class="champ">c</span> Player</div>
</div>
<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="/images/def.svg" alt="Player4">
<div><span class="good">g</span> Player</div>
</div>
<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="/images/efg.svg" alt="Player5">
<div><span class="hero">h</span> Player</div>
</div>
<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="/images/fgh.svg" alt="Player6">
<div><span class="king">k</span> Player</div>
</div>
</div>