Twitter Boostrap on mobile not displaying as "xs" size

Question

So I'm working on this new design for this website: www.descola.org.

I was working on my localhost and it was all great, and I was very careful to have a nice view on mobile screens.

But when I uploaded the new design to the server and opened on my phone, things were not as they should be displayed on "XS" screens. They are being shown as on "SM" screens. For instance, the navbar isn't collapsing and the images are shown beside the product descriptions instead of above them.

You can take a look at it here: www.descola.org/dev

Anyone have a clue on what am I missing here?

Cheers,

Answer 1

What is the screen resolution of your phone? Your phone could have a physically small screen but with a reasonable resolution that is higher than 'XS'. So the fact that your phone is a mobile device does not automatically mean that it is an 'XS' device in fact it can be an 'SM' device

Cheers

Answer 2

Sorry about the lack of details in the question. But I've figured it out.

Since the previous website wasn't responsive, these two statements wasn't in the head section:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Now it works!

Cheers,