Making a List Element (ul/li) Mobile Friendly/Responsive in HTML/CSS
<p>We have a "As Seen On" press column on desktop near the footer. On desktop it works properly and the logos are all centered on one line. However, it does the same for mobile and on mobile I need the logos to be stacked instead of all one one line so you don't scroll all the way to the right on your phone or tablet.</p>

<p>I'm not 100% sure but I think I need a media query but I am kinda new to formatting CSS.</p>

<p>HTML:</p>

<pre><code>&lt;div class='clearfix'&gt;&lt;/div&gt;
&lt;div class='center' style = "margin-top:3%; margin-bottom:5%"&gt;
    &lt;h2 class="page-header text-center"&gt;As Seen On&lt;/h2&gt;
    &lt;br&gt;
        &lt;ul class="press"&gt;
          &lt;li&gt;
            &lt;div class="press-logo"&gt;
              &lt;img alt="One" src="" /&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;span class="sr-only"&gt;One&lt;/span&gt;
          &lt;/li&gt;&lt;li&gt;
            &lt;div class="press-logo"&gt;
              &lt;img alt="Two" src="" /&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;span class="sr-only"&gt;Two&lt;/span&gt;
          &lt;/li&gt;&lt;li&gt;
            &lt;div class="press-logo"&gt;
              &lt;img alt="Three" src="" /&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;span class="sr-only"&gt;Three&lt;/span&gt;
          &lt;/li&gt;&lt;li&gt;
            &lt;div class="press-logo"&gt;
              &lt;img alt="Four" src="" /&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;span class="sr-only"&gt;Four&lt;/span&gt;
          &lt;/li&gt;&lt;li&gt;
        &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>ul.press {
  display: table;
  width: 100%;
  text-align: center;
}

ul.press &gt; li {
  display: table-cell;
}
</code></pre>

<p>Thanks</p>