# Horizontal Scroll on mobile

**URL:** https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858
**Category:** Bug
**Created:** [January 12, 2016, 10:15pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858 "2016-01-12T22:15:26Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [January 12, 2016, 10:15pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/1 "2016-01-12T22:15:26Z")

</div>

There is a topic here on meta breaking the layout. I think some overflow hidden is needed.

 ![](https://global.discourse-cdn.com/meta/original/3X/3/1/3190ad4f780f4f889ba8062ac44e5dadc3e07296.png)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [January 13, 2016, 2:59am UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/2 "2016-01-13T02:59:21Z")

</div>

Its that giant title got to be a wordwrap break word or something that we can apply.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 13, 2016, 3:00am UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/3 "2016-01-13T03:00:15Z")

</div>

Yes @techapj and I looked at this once before. I thought we put in the right CSS, maybe not.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 13, 2016, 6:47am UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/4 "2016-01-13T06:47:59Z")

</div>

Was not able to repro this on topic list page, but opening that exact topic detail page was breaking horizontal scrolling for me on iPhone 6 and OnePlus One.

I pushed a fix which should handle both topic list and topic detail page.

[https://github.com/discourse/discourse/commit/68a69c213cc743f3c2d6f632b3a4acd8a4715c80](https://github.com/discourse/discourse/commit/68a69c213cc743f3c2d6f632b3a4acd8a4715c80)

I think I was not able to repro this on topic list page because both of my testing devices have large screen. :slightly_smiling:

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [January 13, 2016, 1:22pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/7 "2016-01-13T13:22:48Z")

</div>

Sorry but it still happening with me :sadpanda:

Latest Chrome @ Android 6

 ![](https://global.discourse-cdn.com/meta/original/3X/b/8/b8dd9ff5c9ecb2350cd25266be9d0599178b9d9e.png)

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 14, 2016, 6:23pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/8 "2016-01-14T18:23:36Z")

</div>

@Falco which device you are on?

I am not able to repro this on my OnePlus One (Latest Chrome, Android 5), and can’t repro it using Chrome Device Emulator on Nexus 4, 5, 6 or 7.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [January 14, 2016, 6:25pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/9 "2016-01-14T18:25:32Z")

</div>

Moto X 2014 [XT-1097](http://www.phonemore.com/phone/motorola-moto-x-2014-xt1097-32gb/1717)

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [January 14, 2016, 6:43pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/10 "2016-01-14T18:43:58Z")

</div>

Can confirm problem exists on OnePlus One on Latest Chrome with specific topic in view

 ![](https://global.discourse-cdn.com/meta/original/3X/b/d/bd0c724699a30676126a2cc1274dc8145897a565.png)

Here is the debugger view:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/0/70cbf9a0c9e3373b6ba544acd3559b7794c5bc21.png)

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 14, 2016, 8:33pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/11 "2016-01-14T20:33:52Z")

</div>

Oops, yes I can repro it on OnePlus One (Latest Chrome). :frowning:

Yesterday, while testing locally I changed the long word in title from `/var/www/discourse/config/discourse.conf` to `/var/discourse/config/discourse.conf` (notice the missing `/www`) and forgot about this change while making final CSS changes, and hence was not able to repro it.

Adding `max-width: 300px` to the parent `td` fixes this issue on Android Chrome. Verified that iOS Chrome is not affected with this change.

PR:

[https://github.com/discourse/discourse/pull/3960](https://github.com/discourse/discourse/pull/3960)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 14, 2016, 8:35pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/12 "2016-01-14T20:35:34Z")

</div>

Are you sure max width does not cause other issues? Did we test on Android and IOS devices of both small and large size?

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 14, 2016, 9:10pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/13 "2016-01-14T21:10:54Z")

</div>

Tested the fix on:

- Chrome: OnePlus One (Android 5), iPhone 6, iPad mini 2, iPad 4
- Safari: iPhone 6, iPad mini 2, iPad 4

in portrait/landscape mode. Did not noticed any issue.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 23, 2016, 5:09pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/14 "2016-01-23T17:09:00Z")

</div>

This issue is fixed now.

 ![](https://global.discourse-cdn.com/meta/original/3X/a/5/a5dc0508c4aab95a3d4ffc9e8abbc42d32887f37.png)

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 23, 2016, 5:09pm UTC](https://meta.discourse.org/t/horizontal-scroll-on-mobile/37858/15 "2016-01-23T17:09:13Z")

</div>


