Why aren't my media query break points triggering?

This code is intended to change the header image on mobile devices with a width less that 480px.

jsfiddle link

 @media only screen and (max-width: 480px){ /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */ body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */ body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */ *[class].social-cell { width: 100% !important; } *[class].social-spacer { height: 10px !important; } .hero-image .top-image { background-image: url('http://ift.tt/21WC9hI;) !important} } 

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 01, 2016 at 03:53PM by Very_polite http://ift.tt/1RtUAJ7