Vertical scrolling on mobile

Question

I have the following markup:

<div>
  <a>..</a>
  <i>..</i>
  <a>..</a>
  <i>..</i>
  <a>..</a>
  <i>..</i>
</div>

Which just shows all the elements horizontally inline on desktops and other screens which are wide enough to hold the content. However when it comes to mobile, the elements wrap across two lines. Is it possible to keep everything on one line and have it be horizontally scrollable?

I've tried:

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

But that doesn't seem to do anything.

Possible duplicate of [HTML+CSS: How to force div contents to stay in one line?](http://stackoverflow.com/questions/5232310/htmlcss-how-to-force-div-contents-to-stay-in-one-line) — Himanshu Tyagi, Jul 13 '16 at 08:06

score 0 · Answer 1 · answered Jul 13 '16 at 07:54

try white-space: nowrap; on your div

div{
  white-space: nowrap;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Vertical scrolling on mobile

1 Answers1