Media Query for Responsive CSS

I'm trying to edit a website I made last year to incorporate responsive design. Having read some articles from various sources, it seems one of the more common ways of doing this is using a @Media query tag in the CSS.

I've had some success to this point, the website reduces to how I want it to display if you reduce a browser window on your PC to 480px. However, when you view it on a smartphone it does not look the same. I assume I'm missing something simple in the code for smartphones but I'm stuck.

Links below:

www.designercurtains.biz/test/index.htm
www.designercurtains.biz/test/descurt.css

Any help greatly appreciated as always!

Good question! You need a <meta name="viewport" content="[...]"> element. Otherwise many mobile browsers will assume that your page is not designed to fit small screens.

http://webdesign.tutsplus.com/tutor...wport-meta-tag/
http://webdesignerwall.com/tutorial...sponsive-design
https://developer.mozilla.org/en/Mo...ewport_meta_tag
http://coding.smashingmagazine.com/...f-your-website/
http://developer.apple.com/library/...heViewport.html

Thanks Kravvitz for your reply. I actually did include the viewport code previously but when it was displaying differently on different devices I wondered if the initial scale rule had anything to do with it and removed the code to see what happened. I then promptly forgot about removing it when this error started lol.

I think I'm struggling to understand the Media Query fully.

I've now set device width to 320px, initial scale=1 and my media query is set to activate at 320px. All this works lovely on my iPhone, and bar a few tweaks looks generally how I'd want it to.

My struggle now is to get it to look like that on all/most smartphone devices.

What's the best way of achieving this? Making more media querys for more sizes? i.e another query at 480px?

I'm currently resizing divs to 320px for the media query. Is it better to use % for divs when using this rule?

Its a lovely and interesting feature to try and learn!