# Weird text formatting/wrapping on mobile \[1.9.0.beta10\]

**URL:** https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467
**Category:** Bug
**Created:** [20 september 2017 om 17:29 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467 "2017-09-20T17:29:02Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![insertusernamehere](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@insertusernamehere](https://meta.discourse.org/u/insertusernamehere)
#### Post date: [20 september 2017 om 17:29 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/1 "2017-09-20T17:29:02Z")

</div>

- The forum is [community.infinite-flight.com](http://community.infinite-flight.com)

- Discourse version is 1.9.0.beta10

- Phone is a Samsung Galaxy core prime - 4.5" display, running Android 5.1.1

- Using Google Chrome - stable edition

Since we’ve updated to the 1.9.0.beta10 , at the bottom of threads the text formatting next to buttons has been weird. Not sure this is intentional?  
_Not thread or category specific_

 ![Screenshot_2017-09-20-18-23-27](https://global.discourse-cdn.com/meta/original/3X/a/5/a54b03df7a4299d7764f5a62d7f8df4770b14e97.png)  
 ![Screenshot_2017-09-20-18-23-36](https://global.discourse-cdn.com/meta/original/3X/2/b/2bc7bd50ace338da3712bb449afced479f2fbc25.png)

Thanks in advance for any help,  
John

---

<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: [20 september 2017 om 18:13 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/2 "2017-09-20T18:13:04Z")

</div>

This is @j.jaffeux’s code, can you repro here on meta though?

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [20 september 2017 om 18:16 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/3 "2017-09-20T18:16:23Z")

</div>

I certainly can repro, It was a choice, but it can indeed be weird on small screens. I will find a better solution.

---

<div class="post-metadata">

### Author: ![insertusernamehere](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@insertusernamehere](https://meta.discourse.org/u/insertusernamehere)
#### Post date: [20 september 2017 om 18:20 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/5 "2017-09-20T18:20:35Z")

</div>

Yep, it’s the exact same here 🙂

Sounds fantastic, thanks @j.jaffeux!

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [20 september 2017 om 18:28 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/6 "2017-09-20T18:28:46Z")

</div>

@insertusernamehere, do you have any thoughts/suggestions on what you’d like to see here? It’s a lot of text to fit on a small screen.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [20 september 2017 om 18:31 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/7 "2017-09-20T18:31:44Z")

</div>

We just want it to follow the flow.

---

<div class="post-metadata">

### Author: ![insertusernamehere](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@insertusernamehere](https://meta.discourse.org/u/insertusernamehere)
#### Post date: [20 september 2017 om 18:48 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/8 "2017-09-20T18:48:35Z")

</div>

“As it was before” is the best I can say ☹. Sorry for the vagueness :(. @j.jaffeux put it perfectly

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [20 september 2017 om 19:20 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/9 "2017-09-20T19:20:25Z")

</div>

I have tried to keep the best of both ideas:

This is on a small screen (makes the text as readable as possible and limits the waste of vertical space in case it would create more than 2 lines):

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

This is on a larger screen (put the text on two lines elegantly and without losing vertical space):

 ![45](https://global.discourse-cdn.com/meta/original/3X/e/9/e9a52fd4b505f9828e35d6ee1fe511a4968925d5.png)

Is this what you would expect? @insertusernamehere

---

<div class="post-metadata">

### Author: ![insertusernamehere](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@insertusernamehere](https://meta.discourse.org/u/insertusernamehere)
#### Post date: [20 september 2017 om 19:34 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/10 "2017-09-20T19:34:19Z")

</div>

That’s great - looks really nice. Thanks!

---

<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: [20 september 2017 om 19:34 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/11 "2017-09-20T19:34:56Z")

</div>

It is not the same as before; prior to this the text cleared on mobile and appeared _underneath_ the button, not next to it.

So I suggest a media query that at certain narrow widths puts the text underneath.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [20 september 2017 om 19:35 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/12 "2017-09-20T19:35:59Z")

</div>

This is actually the easiest thing to do, you would prefer this behaviour?

---

<div class="post-metadata">

### Author: ![insertusernamehere](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@insertusernamehere](https://meta.discourse.org/u/insertusernamehere)
#### Post date: [20 september 2017 om 19:37 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/13 "2017-09-20T19:37:00Z")

</div>

How it looked before always looked amazing, so yes, as long as it isn’t any trouble for you guys.

😄 thanks for the speedy help!

---

<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: [20 september 2017 om 19:37 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/14 "2017-09-20T19:37:13Z")

</div>

At narrow widths I think this is the obvious choice.

---

<div class="post-metadata">

### Author: ![schungx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/schungx/32/70989_2.png) [@schungx](https://meta.discourse.org/u/schungx)
#### Post date: [21 september 2017 om 05:22 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/15 "2017-09-21T05:22:39Z")

</div>

How about tugged to the right unless the text occupies less than half of the width, meaning a long button. Then it moves down.

I suppose this can be easily done by setting the text to `min-width:50%`? If less than half space is needed then move below.

Beware, though, the not all languages are long. German probably will be long, but Chinese will look great even wth only 1/3 of the space and will look weird moved down the line.

---

<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: [30 maart 2018 om 00:15 UTC](https://meta.discourse.org/t/weird-text-formatting-wrapping-on-mobile-1-9-0-beta10/70467/16 "2018-03-30T00:15:58Z")

</div>


