Making a List Element (ul/li) Mobile Friendly/Responsive in HTML/CSS

Question

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.

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

HTML:

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

CSS:

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

ul.press > li {
  display: table-cell;
}

Thanks

Answer 1

What you're looking for can be easily achieved with a few lines of CSS. You can view the CSS I've created (and documented) in this JSFiddle: https://jsfiddle.net/8oLxr7ke/

.press {
    display: block;  /* Remove bullet points; allow greater control of positioning */
    padding: 0;      /* Override defaults for lists */
    margin: 0;       /* Override defaults for lists */
    width: 100%;     /* Get the row full width */
}

.press li {
    display: inline-block; /* Get all images to show in a row */
    width: 25%;            /* Show 4 logos per row */
    text-align: center;    /* Centre align the images */
}

@media (max-width: 960px) and (min-width: 501px) {
    .press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
    .press li { width: 100%; } /* On small screens, show one logo per row */
}

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

In essence, what my code does is:

• Set up a rudimentary grid system
• Show four logos on large screens
• Show two logos on medium screens
• Show only one logo on small screens

---

If you don't want to be restricted to showing a set number of logos, you could do the following:

View on JSFiddle https://jsfiddle.net/5m0whf3k/

.press {
  display: table;      /* Required for table-cell to work on li's */
  padding: 0;          /* Override defaults for lists */
  margin: 0;           /* Override defaults for lists */
  width: 100%;         /* Get the row full width */
  text-align: center;  /* Centre align grid items */
}

.press li {
  display: table-cell;   /* Get all images to show in a row */
  text-align: center;    /* Centre align the images */
}

@media (max-width: 960px) and (min-width: 501px) {
  .press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
  .press li { width: 100%; } /* On small screens, show one logo per row */
}

@media (max-width: 960px) {
  .press {
    display: block;
  }
  
  .press li {
    display: inline-block;
  }
}

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

---

Important note:

In your HTML code there were closing </a> tags after the <img> tags but no opening <a> tags - this is invalid code. In my example I have removed those for you.

Also, you shouldn't need the <br> between the <h2> and the <ul class="press"> as the press list will be full width and on its own row thanks to the display: block;.