Site displaying strangely on mobile devices

Any ideas why my site is displaying strangely on some mobile devices?

Here is a screen grab of what it looks like on an Amazon Kindle Fire using Android http://www.advocatedesign.co.uk/untitled1.html

And below is a link to what it should look like.

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.

Thanks

http://www.advocatedesign.co.uk/ethics.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?

Here is a screen grab of what it looks like on an Amazon Kindle Fire using Android http://www.advocatedesign.co.uk/untitled1.html

And below is a link to what it should look like.

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.

Thanks

http://www.advocatedesign.co.uk/ethics.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Cheers, Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Cheers, Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter

I’m sure you are right. I need to move away from absolute positioning of items to the box model.

I understand that FW6 makes box model and Master pages much easier.

When I get the time I’ll update it…

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?)

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?)

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options