How do I make images in an inline list scale down to keep the list inline as the div changes size?

Question

I have an inline list of social media icons in the header of a website done in Bootstrap 4. As the screen size changes, scaling down, the image icons stay inline until their div gets to 1112px then they start line breaking. Once the div reaches 414px they return to inline and look nice. I've tried setting the list items to specific width and height then creating an image class for max-width: 100% and height: auto but that didn't work. Using the Bootstrap native "list-inline" and "list-inline-item" classes also didn't work.

CSS

.col-sm.scl {
margin-top: 20px;
text-align: center; 
}
.col-sm.scl ul {
list-style: none;
padding: 0px;
}

.col-sm.scl ul li {
width: 40px;
height: 41px;
display: inline;
padding-right: 2px;
padding-left: 2px;
}

HTML

<div class="row">

<!-- Social Icons -->
<div class="col-sm scl">
<ul>
<li><img src="images/facebook.png" class="socialitems" alt="Facebook   Icon"></li>
<li><img src="images/twitter.png" class="socialitems" alt="Twitter Icon"></li>
<li><img src="images/linkedin.png" class="socialitems" alt="Linkedin Icon"></li>
<li><img src="images/youtube.png" class="socialitems" alt="Youtube Icon"></li>
<li><img src="images/email.png" class="socialitems" alt="Email Icon">.  </li>
</ul>
</div>
<!-- Social Icons END -->
</div>

Answer 1

Using your code I have edited the list to be inline-block. You may need to adjust the width of each menu li to get the desired look.

.center {
    text-align: center;
}
#myFooter .second-bar {
    background-color: #33373e;
}

#myFooter .second-bar a {
    font-size: 22px;
    color: #9fa3a9;
    padding: 10px;
    transition: 0.2s;
    line-height: 68px;
}

#myFooter .second-bar a:hover {
    text-decoration: none;
    color: #00aced;
}


@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }

    #myFooter .info {
        text-align: center;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="myFooter">
  <div class="second-bar">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-4">
          <h2 class="logo"><a href="#"> LOGO </a></h2>
        </div>
        <div class="col-sm-12 col-md-4 center">
          <p style="color: #fff; line-height: 68px;">More Content</p>
        </div>
        <div class="col-sm-12 col-md-4">
          <div class="social-icons center">
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-google-plus"></i></a>
            <a href="#"><i class="fa fa-envelope"></i></a>
            <a href="#"><i class="fa fa-github"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>