Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialChris Phillips
5,637 PointsWebsite not responsive on different devices, only when resizing browser window.
Hi Guys,
The website example is responsive when resizing the browser but does not change on different devices e.g. smartphones. I have checked the example project download too and it does not change for different devices.
Any help with why this might be?
6 Answers
jamescool
44,592 PointsYou might want to inspect the head of the html document to make sure you've included this meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1">
Also, check all the links to the CSS files that include the media queries. If you'd like, you can always include a bit of your code so that we can check it out for you.
Chris Phillips
5,637 PointsHi James thanks so much for the reply. I have already included the meta tag. I have made the site live at www.cphillips.co.uk. Is there any chance that you could have a little look at it?
Thanks again, Chris
jamescool
44,592 Pointssure. give me one second.
jamescool
44,592 PointsChris, try moving the meta tag I mentioned earlier just under the first meta tag that specifies the character set. I remember reading that it must be inserted near the top of the page. In other words, the viewport meta tag should happen BEFORE the links to your CSS files (closer to the top of the document).
Chris Phillips
5,637 PointsHi James thanks again but still not working!
jamescool
44,592 PointsI'm looking right now at the source code, and it looks like the meta tag is still in the same place. Are you sure you moved it up?
jamescool
44,592 Pointsonce you update the HTML file and upload to your server, visit your website. right click somewhere on the screen and select "view page source." You'll then be able to see if your changes to the HTML have actually taken place.
Chris Phillips
5,637 PointsHi James,
I changed it on my local machine to test and it didnt seem to have an effect there.
I will update it online now.
Thanks, Chris
jamescool
44,592 PointsI ran your code through the HTML validator here: https://validator.w3.org/#validate_by_input
...and it's complaining about your google fonts link. You might want to make sure this is correctly formatted.
Chris Phillips
5,637 PointsThanks James I have done this again and taken it straight from google but it seems to make no difference! Not sure what is going on here, any other ideas?
Chris Phillips
5,637 PointsIt's working - not sure what happened but all of a sudden it is now being responsive on all devices! Yes!
jamescool
44,592 PointsThat's great! I've got bad news, though: your 'about' and 'contact' pages also need to have the same update applied to them. Once this is done, it should work for every page. In the future, you should look into using PHP to generate a header into every page. This will make it a lot easier to maintain because if a change is needed, you'll only have to make it in one place. For now, it will be sufficient to simply move that meta tag up for both remaining pages.
jamescool
44,592 Pointsjamescool
44,592 PointsBy the way, you can check out the below article if you're interested. It discusses the problem that I'm suspecting to be the cause of your troubles: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=en