Question

UPDATE
I solved my own question. See below.

---

I made a site with bootstrap and additional @media queries to style the site. On the desktop it shows the mobile layout when I resize the browser, but on my phone it still loads the full width site. I am using Chrome on Nexus S.

http://conversing.ca

I’ve looked at posts with similar issues. Checked the viewport meta tag, handheld media tags in the HTML..

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen,handheld" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" media="screen,handheld" href="style.css" />

CSS (style.css)

I added the #wrapper line I saw from another post but that didn’t work either.
Wish there’s a way to view dev tools on mobile.

@media handheld, screen and (max-width: 767px){

#wrapper{width: 767px;}

body {
padding-right: 0px;
padding-left: 0px;
}

.hero-unit {
margin-top:0px;
padding-left: 12%;
}

.iphone {
top: auto;
left: 0;
position: relative;
}

input,button{
width: 90%;
margin: 0 auto;
}

#footer {
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}

Answer 1

I solved my own question. The fault was the iframe from domain masking with the ‘noresize’ tag. I couldn’t edit the HTML for that, so I’ve disabled the feature and now you should see the mobile layout on the phone.