Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Line Wrapping Problem on Android Browsers

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #175711
    sonicpixel
    Participant

    I’m having an issue only on Android devices where the navigation and some buttons are wrapping onto a second line when they shouldn’t – so far I’ve only seen the issue on Nexus 5, Nexus 7, and Moto X devices.

    This is how the nav looks on most devices: http://cl.ly/image/1L2d1E082V1R

    This screen is from Nexus 7 – there’s totally enough room for ‘Used Pallet Racking’ to fit in that nav but it’s splitting onto a second line: http://cl.ly/image/0b1F0L3U2K3u

    The Nexus 7 emulator in Chrome Canary shows it sitting normally as it does in other browsers I’ve tested, but the above screenshot (from my client’s Nexus 7) the last item is breaking over even through there’s plenty of room for it.

    Some buttons are also breaking onto a second line only on Nexus 7 as well: http://cl.ly/image/0w2c1W3D1g2D

    When they should fit on one line as they do elsewhere: http://cl.ly/image/2X002n2D3c0z

    Here’s the Site in question: http://bit.ly/1zNxseX

    Is there something android specific going on here? I don’t really know what to try as I can’t replicate the issue.

    Any suggestions would be greatly appreciated.

    #175743
    TheDutchCoder
    Participant

    Hi sonicpixel,

    I have had similar experiences and issues on Android devices.
    It seems like there’s a bug at play that causes this, but I usually solve it by forcing the element to not wrap.

    E.g.:

    .main-navigation a {
        whitespace: nowrap;
    }
    

    and

    .widget-area a.button {
        whitespace: nowrap;
    }
    

    Is that a possibility for you?

    #176000
    sonicpixel
    Participant

    Thanks very much for the reply DutchCoder! I’ve just added the code and will wait to see if it fixes the problem on my client’s devices.

    Much appreciated!

    #176010
    TheDutchCoder
    Participant

    No worries! I actually just had it happen again! ;-)
    Must be some kind of calculation error in the browser.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.