horizontal scroll on small. Key parts of CSS are white space no wrap and overflow scroll touch

index.html

	<div class="container">
		  <ul>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
    <li><img src="http://placehold.it/250x175"></li>
		  </ul>
	</div>

overflow-_image-_gallery.markdown

Overflow Image Gallery

A Pen by Jordan Moore on CodePen.

License.

Overflow-Image-Gallery.markdown

Overflow Image Gallery

A Pen by Jordan Moore on CodePen.

License.

style.css

/* Begin demo styles */

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

a {
  text-decoration: none;
}

/* End demo styles */

.container {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.container ul {
  list-style-type: none;
  padding: 0;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 800px) {
  .container ul {
    white-space: normal;
  }
}

.container ul li {
  display: inline-block;
}

.container ul li a {
  display: inline-block;
}