How do I fix my website so that it works on mobile devices?

I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet. If you take a look here: responsive design link开发者_开发问答 and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.

Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?

This is happening because your design is not completely fluid.

Only your container div will adjust with the width (a bit)

To fix this quickly, you could

1. give your divs percentage widths, so they scale with the screen resolution

2. float your square boxes at the bottom, so they will stack on smaller screens

3. consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.

Get some ideas here: http://mediaqueri.es/

As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.

When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.