- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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?
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!
No worries! I actually just had it happen again! ;-)
Must be some kind of calculation error in the browser.