Search code examples
cssresponsivemobile-devices

Responsive CSS don't apply on smartphone

I had to create a specific CSS file to turn an old website into responsive design compatibility. Problem is, even though the new styles apply on a desktop browser (when downsizing the window) it doesn't seem to load on the smartphones.

I used @media queries like this :

@media all and (max-width: 900px)
    {
     /* CSS */
    }

Also tried differents variations and size, without success.

@media all and (max-device-width: 900px)
{
    /* CSS */
}

As this is an old website weirdly coded there might be an incompatibilty somewhere but I don't get why it'll work on the desktop anyway. Of course I tried to empty the cache and all without success.

Here's the website : http://www.antiquaire-du-vitrail.com/

Got any idea what the problem could be ?

Solution

  • Do you have the <meta> tag in your <head> section?

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

    Secondly I would use @duy nguyen solution too:

    @media screen and (max-width: 900px)
{
 /* CSS */
}