I’ve just done some live testing and screenshots with Browser Stack of a website I’m making. These highlight an issue I’ve come across on other sites I’ve built. On some mobile devices (not Apple products), text which is suppose to go across the full width of the layout - the heading and footer text in this instance- doesn’t.
The header div has a width of 880px and a border top and bottom. The footer div has a width of 880px and a border top. I can see the borders, so the width of the divs is displaying fine. So why is the browser displaying the line length of my heading and footer much shorter than it should be?
My hunch is that this has something to do with some browsers not wanting to display line lengths which it thinks is too long for comfortable reading. The browser is automatically reducing the line length to make it more readable to the end user.
This is annoying and the browser is being very dim. My heading text is very large and so there isn’t a problem with line length.
Hi Mark,
It looks like it is a bug in the Android stock browser (which is based on WebKit and ‘should’ be the roughly same as Safari, Chrome etc on the Mac) as can be seen here;
There are no solid solutions to this although the following suggestion by ‘Delbert’ on this page looks like it may be worth trying;
I’d be inclined to manually edit one of the Freeway HTML pages to test this in BrowserStack before you change anything in your site just to make sure that the suggestion works for you. You’ll need to upload a clear gif image (Freeway creates these and calls them _clear.gif) to the same directory as the HTML page you are testing and insert the following CSS in the head of them page in a block;
Hi Mark,
I was curious to see if this would fix it so I tried it myself…
As you can see the Kindle Fire and Nexus 4 (amongst others) which were previously wrapping the text now display it as a single line as intended.
This is all very hacky but appears to work and shouldn’t cause any issues with the rest of the page.
If you look at the source code for that page (http://www.freewayactions.com/test/ert/) you should see the extra CSS I’ve added in for the headers. Add this to your master page (or external stylesheet) and FTP the _clear gif image into the site and you should be back on track.
Regards,
Tim.
On 15 Oct 2013, at 13:23, Tim Plumb wrote:
I’d be inclined to manually edit one of the Freeway HTML pages