Layout of the page on small screens

Question

You can see the sample image below, my layout... The web site works fine enough. But I used an image on left side, out of the content part.

So, if visited via a small sc

Answer 1

You can use CSS media queries to target smaller screen sizes, and then either move the image below your content, or hide the image altogether. Now, keep in mind that if you hide the image with display:none; it will still download, but simply isn't displayed.

Answer 2

Simply allow to show your content with lesser width.

For mobile optimation you should also add some meta tags to control the zoom factor.

Like this here:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

For adding special css rules try this here:

<style type="text/css" media="screen">
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 630px) {
    ...
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    ...
}
</style>