Google Chrome device rendering problems

I used the device viewport code:

<meta name="viewport" content="width=device-width">

But it doesn't render in the chrome developer tool device rendering option. Instead it displays a little warning sign with the words "you might need to reload the page for proper user agent spoofing and viewport rendering." But nothing happened when I re-loaded.

I even googled around and used:

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

But that didn't fix things either. I don't think the renderer is off since it works fine when I use it on another website (like teamtreehouse).

I even made a local copy of the code and it still had the same result.

I don't think it's a media query problem since it works fine when I reduce my browser size but my code for that is as follows:

@media (max-width: 1024px) {

.primary-content, .secondary-content { width: 90%; }

.wildlife { padding: 10% 12%; margin: 50px 0 20px; }

}

@media (max-width: 760px) {

.primary-content, .secondary-content { width: 100%; padding: 20px; border: none; }

.main-header { max-height: 380px; padding: 50px 25px 0; }

.title { font-size: 1.3rem; border: none; }

h1 { font-size: 5rem; line-height: 1.1; }

.arrow { display: none; }

.intro { font-size: 1rem; }

.resorts, .tips { float: none; width: 100%; }

.main-footer { padding: 10px 0; }

}