@media only screen and (max-width: 479px) not working for mobile

Try using device width rather than just screen size. Many mobile / tablet devices will open pages in an overview thus screen size will be ignored.

Also some mobile devices will respond to the @media handheld selector.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
@media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/

@media handheld and (max-width: 960px)
/*handheld*/

In the head of your document, make sure you have

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

If you omit this, then many devices will scale the page to fit the viewport.

Do you have a viewport meta tag specified? I'd suggest changing 479 to 480 too.

Here's an example of a viewport meta tag - this is the one I use on my own responsive website.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">