Media queries

Hello! I have a problem with viewing my website with mobile devices. I changed the position and styles of some modules in the standart HOTtheme, and added in "template_css" what I want to change.

As a result, when I view the website by using computer and resize the browser, it works perfectly, but mobile devices totally ignore my styles and the website looks awful. It seems the devices apply the default style for computer screens. Could you tell me what I did wrong?

@media (max-width: 800px) { {my style} }
@media (max-width: 600px)
@media (max-width: 400px)


I've also tried this:


@media all and (max-width: 800px)
@media and (max-width-device: 800px)
@media handheld and (max-width-device: 800px)


...but it doesn't work

the site is: vetradiography.ru

Thanks in advance,
Philip.

Use:

@media screen and (max-width: 800px){

... css for under 800px ...

}

also you need to watch out about css rules advantage. More precise element targeting and order css of rules - second to be loaded if targeting same css path wins and id selector #something will win .something ...