Create a Horizontal Mobile Scroll Box Using CSS Flexbox and Media Query
Tags: css, flexbox, mediaquery, webdesign
Published: 2019-05-13 03:30:48

---
title: Create a Horizontal Mobile Scroll Box Using CSS Flexbox and Media Query
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z5ecwns4p9mmtmosqjc4.png
description: transform a vertical list into a horizontal scroll box
tags: #css #flexbox #mediaquery #webdesign
---
_Originally published [here](https://www.bennettdungan.com/2019/05/12/create-a-horizontal-mobile-scroll-box-using-css-flexbox-and-media-query/)_

<!-- wp:paragraph -->
<p>I had the chance to flex my CSS chops recently, which turned out to be pretty weak, but I learned a few cool things along the way. I was tasked to create a vertical list that transforms to horizontal scrolling when sized down to mobile. This was the outcome:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":194} -->
<figure class="wp-block-image"><img src="https://www.bennettdungan.com/wp-content/uploads/2019/05/May-12-2019-00-29-15.gif" alt="" class="wp-image-194"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The two main takeaways from this came from using CSS's media queries and flexbox. I had only done some real quick and dirty CSS styling in the past so this was my first exposure to both of these two tools. I whipped up this <a href="https://codepen.io/Beznet/pen/vwOPRa">simple Codepen version</a> of the above where you can see the vertical to horizontal list and scroll in action. The majority of the magic comes from this little chunk of CSS:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"css","firstLineNumber":"3"} -->
<pre class="wp-block-syntaxhighlighter-code">@media (max-width: 992px) {
  .container {
      display: flex;
      flex-wrap: nowrap;
      height: 300px;
      overflow-x: auto;
      width: auto;
  }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>The first thing you'll notice is that <code>@media</code> rule  which is how Im telling the div with all the items to apply the subsequent CSS properties to the <code>.container</code> class.  To put it simply, when the screen size hits 992px or lower, the <code>.container</code> class now changes/adds the listed properties starting with <code>display: flex</code> .</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, we're adding flexbox with <code>display: flex</code> and then making sure that the items do not wrap within the container as we scale it down with <code>flex-wrap: nowrap</code> . I changed the height of the container to a more narrow 300px so it creates a mobile-friendly view of the item that scroll. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>Sidenote: If you're unfamiliar with Flexbox , I highly recommend doing this interactive learning game: </em><a href="https://flexboxfroggy.com/"><em>Flexbox Froggy</em></a><em> . It teaches you most of the basic and some advanced properties of Flexbox by maneuvering a frog onto its lillypad. </em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Finally we add <code>overflow-x: auto</code> to allow the items within the container to have scrollable functionality on the X axis when the items spill outside of the parent container. Without this property we'd have something that looks like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":208,"align":"center","width":453,"height":231} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://www.bennettdungan.com/wp-content/uploads/2019/05/Screen-Shot-2019-05-12-at-11.59.11-AM-1024x523.png" alt="" class="wp-image-208" width="453" height="231"/><figcaption>:(</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once we have all those properties put together, we're left with a nifty little item list that transforms to mobile-friendly horizontal scrolling:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":210,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.bennettdungan.com/wp-content/uploads/2019/05/May-12-2019-12-27-55.gif" alt="codepen scroll animation" class="wp-image-210"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Typically, you're going to be taking a list of items that is horizontal in desktop screen sizes and then scaling it down to a vertical list when hitting mobile screens. So we're essentially forcing the opposite to happen here which isn't too common and why its sometimes hard to find a solution for it on places like Stackoverflow. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hopefully you found this useful. If you know of a better way or some clever little tricks I missed please be sure to let me know! </p>
<!-- /wp:paragraph -->