Display problem on smartphone

benbob65

Just found out that my site does not display correctly on (some) smartphones.
When I checked on my friend's phone, there was no margin on the right or left, causing the graphics in those margins to be displayed on top of the text in the body.

1. How do I avoid this?
2. Are there any good simulators that I can use to check alterations?

S.M.B.

benbob65 wrote: »

Just found out that my site does not display correctly on (some) smartphones.
When I checked on my friend's phone, there was no margin on the right or left, causing the graphics in those margins to be displayed on top of the text in the body.

1. How do I avoid this?
2. Are there any good simulators that I can use to check alterations?

1. Have you a link?
2. Here is a link.

benbob65

S.M.B. wrote: »

1. Have you a link?

This is my latest page, which is part of my first 3-deep structure experiment.

http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-performa-repairs/potterton-performa-repairs.html

S.M.B. wrote: »

2. Here is a link.

Thanks for that, great stuff. I'll have a go at installing them one by one over the weekend.

S.M.B.

You're using absolute positioning to control your layout which is resulting in the overlapping areas.

You should be using a better method to create a 3 column grid.

http://www.htmldog.com/guides/cssadvanced/layout/

benbob65

Thanks dude, that looks like something I can sink my teeth in for a while.
Is that html-dog a good place to start upgrading my knowledge on css/html5, or can you recommend a good online place to learn?
As you may have guessed from a peek at my site, my html skills are rather limited, and that is putting it politely.

S.M.B.

I think some people find it a useful resource. I always turn to a good book when trying to master something. I find a decent book is always more concise than a series of online tutorials.

Something like this.