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 trial

HTML How to Make a Website Responsive Web Design and Testing Website Testing

Chris Phillips
Chris Phillips
5,637 Points
Posted by Chris Phillips
Chris Phillips
5,637 Points

Website 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
jamescool
44,592 Points

You 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.

jamescool
jamescool
44,592 Points

By 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

Chris Phillips
Chris Phillips
5,637 Points
Chris Phillips
Chris Phillips
5,637 Points

Hi 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
jamescool
44,592 Points

sure. give me one second.

jamescool
jamescool
44,592 Points

Chris, 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
Chris Phillips
5,637 Points
Chris Phillips
Chris Phillips
5,637 Points

Hi James thanks again but still not working!

jamescool
jamescool
44,592 Points

I'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
jamescool
44,592 Points

once 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
Chris Phillips
5,637 Points
Chris Phillips
Chris Phillips
5,637 Points

Hi 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
jamescool
44,592 Points

I 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
Chris Phillips
5,637 Points
Chris Phillips
Chris Phillips
5,637 Points

Thanks 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
Chris Phillips
5,637 Points
Chris Phillips
Chris Phillips
5,637 Points

It's working - not sure what happened but all of a sudden it is now being responsive on all devices! Yes!

jamescool
jamescool
44,592 Points

That'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.