CSS create two columns when window is too short

Question

I have a page with an image with text below it, like this: http://jsfiddle.net/e3vWe/1/ I've set

img {
width:80%;
max-width:900px;
display:block;
margin-left:auto;
margin-right:auto;
}

The problem is, on smaller screens, the bottom of the image is cut off, and text below it requires scrolling to access. Is there a way (with separate stylesheets I assume) to make the text appear to the left of the image while keeping the entire page centered when the window has a height below, say, 600px? Also, for mobile users, revert to a mobile stylesheet when the window has a height of below 400px. Thanks.

Answer 1

Try this for all images and try media query for different style on different screen size.

img { max-width: 100% !important; }