title: How do I make images in an inline list scale down to keep the list inline as the div changes size?
body: <p>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. </p>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
  
  &lt;!-- Social Icons --&gt;
  &lt;div class="col-sm scl"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img src="images/facebook.png" class="socialitems" alt="Facebook   Icon"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/twitter.png" class="socialitems" alt="Twitter Icon"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/linkedin.png" class="socialitems" alt="Linkedin Icon"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/youtube.png" class="socialitems" alt="Youtube Icon"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/email.png" class="socialitems" alt="Email Icon"&gt;.  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- Social Icons END --&gt;
  &lt;/div&gt;
  </code></pre>