Website layout fails in Mobile Safari...

dhobbs1978 · 06-08-2010, 05:00 PM

I have been working on a portfolio website which, after a few dorment years on the coding side of things, has been a good learning experience for me. I have everything working and looking as intended with the exception on Mobile Safari. For some reason which I can't seem to get to the bottom of, the text isn't resizing properly. Exceptional failure can be seen on the work page of the site.
Link to the work in progress in question ... here
and screen shot of layout on my iphone Attachment 8619.

Any help will be greatly appreciated as the perfectionist in me won't be happy until its compatible on as many browsers as possible!

Thanks

Apostropartheid · 06-08-2010, 06:54 PM

If you're really that worried about mobile devices, why not serve an optimized page?

rogierius · 06-08-2010, 07:46 PM

Off topic:

I like your work.

Especially the http://www.primrosecaravanhire.co.uk/ site. I like what you did with the transparent PNG's. The sketch font is really nice, but I think in one year it will be used too many times. You can see this particular font everywhere these days.

Nonetheless, look great.

dhobbs1978 · 06-08-2010, 08:07 PM

Quote:

Originally Posted by rogierius

Off topic:

I like your work.

Especially the http://www.primrosecaravanhire.co.uk/ site. I like what you did with the transparent PNG's. The sketch font is really nice, but I think in one year it will be used too many times. You can see this particular font everywhere these days.

Nonetheless, look great.

I know it was off topic but I really appreciated the comments you made on my work! Thanks

dhobbs1978 · 06-08-2010, 08:08 PM

Quote:

Originally Posted by Apostropartheid

If you're really that worried about mobile devices, why not serve an optimized page?

Unfortunately I am short on spare time so would rather not have to create optimised pages.

Apostropartheid · 06-08-2010, 09:17 PM

Quote:

Originally Posted by dhobbs1978

Unfortunately I am short on spare time so would rather not have to create optimised pages.

Short of actually reducing the text-size across the board, you'll have to either deal with it or you can set mobile-specific CSS. For current-gen devices (not sure what will happen with iPhone 4) you can use media queries, like this:

Code:

<link media="only screen and (max-device-width: 480px)" href="" type= "text/css" rel="stylesheet" />

Through this you can do any fixes or, even better, design your site to fit into a mobile environment.