CODEWITHSUNDEEP
htmlcssbootstrap-4
Girish Kallihal
Girish Kallihal

Reputation: 29

I have six images with names and i want them in the footer side by side

I have six images with names and I want to place them in the footer. After placing the names are displaying in two lines instead of a single line. that is "s player" where "s" is displaying above the "player" instead of in a single line in smaller devices so how to make responsive to resolve 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>

`

Upvotes: 0

Views: 77

Answers (1)

johannchopin
johannchopin

Reputation: 14873

Problem come here from all the class col-xx that you use in you children in row. They have to have all the same width so please just use a single col class :

.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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="footer">
        <div class="row">
        <div class="col">
            <img src="/images/abc.svg" alt="Player1">
            <div><span class="super">s</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/bcd.svg" alt="Player2">
            <div><span class="duper">d</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/cde.svg" alt="Player3">
            <div><span class="champ">c</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/def.svg" alt="Player4">
            <div><span class="good">g</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/efg.svg" alt="Player5">
            <div><span class="hero">h</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/fgh.svg" alt="Player6">
            <div><span class="king">k</span> Player</div>
        </div>
        </div>

Upvotes: 2

Related Questions