The div titled “text1” containing my intro text has a fixed width of 875px. Yet on some mobile devices the width has shrunk out of scale with the rest of the page. On different devices it shrinks by different amounts.
What you may be seeing is not a shrinking of the div but an enlargement of the text in and around it. WebKit has a helpful CSS flag which can turn this off – it’s used on iOS, but only in the iPhone, not the iPad – but remember, that feature is there to help people read your page. It’s always best to design your page to react to changes in text size gracefully. Start there, and then carefully adjust the rest.
html { -webkit-text-size-adjust: 100%; }
Walter
On Jun 27, 2013, at 6:19 AM, Mark wrote:
Any ideas why my site is displaying strangely on some mobile devices?
The div titled “text1” containing my intro text has a fixed width of 875px. Yet on some mobile devices the width has shrunk out of scale with the rest of the page. On different devices it shrinks by different amounts.
I don’t think the size of the text is the issue. All the text styles look in proportion and the site displays fine on Apple products.
If you look at the screen grab you’ll see that the width of the div (suppose to be the width of my page) containing my big intro text has shrunk by a third.
Try grouping the three bottom columns together, then cut the group from the page, and finally paste it inline below the second paragraph of the intro text. See if that forces things to be the right shape. This will make the layout harder to tweak, but if it enforces your layout, then you’re probably in better shape. It will definitely cure the overlapping text problem I see at the end of the intro.
I doubt this will be easy to debug, because the Silk browser uses WebKit on the server to render the page into a series of simplified structures, then sends that over the wire to the Kindle. (Perhaps it sends a bitmap – I can’t remember.) This is a House that Jack Built sort of scenario, if you remember that nursery rhyme.
Walter
On Jun 27, 2013, at 8:43 AM, Mark wrote:
Hi Walter
I don’t think the size of the text is the issue. All the text styles look in proportion and the site displays fine on Apple products.
If you look at the screen grab you’ll see that the width of the div (suppose to be the width of my page) containing my big intro text has shrunk by a third.
I’ve made this bit of my site inline or box model or what ever it is called. I’ve tried it out at Browser Stack and its solved the problem.
Thanks.
The three items (or columns of text) I’ve aligned the first one left, the second one left and the third one right. All with a clear of none. I’ve then added margin to the first column to create the gutter between the two columns.
Is this a suitable way of doing it? (or should I use Clear Left on the first Clear None on the middle and Clear Right on the right column?)
Sounds perfect. That is exactly how I would set up the gutters.
Walter
On Jun 27, 2013, at 11:57 AM, Mark wrote:
Hi Walter
I’ve made this bit of my site inline or box model or what ever it is called. I’ve tried it out at Browser Stack and its solved the problem.
Thanks.
The three items (or columns of text) I’ve aligned the first one left, the second one left and the third one right. All with a clear of none. I’ve then added margin to the first column to create the gutter between the two columns.
Is this a suitable way of doing it? (or should I use Clear Left on the first Clear None on the middle and Clear Right on the right column?)