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

CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Media query not working properly when I go into mobile mode in the Chrome dev tools

The navigation bar changes to the proper mobile layout (each link stacked on top of each other). But when I open up chrome dev tools and switch the view to mobile, the layout of the navigation bar looks the same (links all on the same line). Why is this? Is anyone having the same problem?

4 Answers

Can you post your code so we can take a look and make some suggestions?

I've already moved on so I've lost the previous workspace. I don't see why you would need my code given that I was working with the workspace for this video. I don't think I made any changes to the code in the workspace that didn't match the instructions given.

My thought is that you may have missed some type of punctuation or small error that a second set of eyes may have caught.

Well if no one else has reported the same problem that is the most likely possibility. Unfortunately I don't have access to my old code so if that's true I can't find out where I actually went wrong. Thanks for your time anyways.

I have the exact same problem now. It does not re-size responsively in my chrome dev tools. However when I resize my browser window (not in dev tools) it does re-size responsively and correctly. Very weird. Not sure why.

Okay I solved this by adding the following meta tag to the html: <meta name="viewport" content="width=device-width, initial-scale=1.0">

My newbie guess is this must be an old video and so it doesn't work properly with the current version of HTML without the meta tag. Also nobody commented on this for 2 years? Am I the only person still using treehouse?

ilovecode
ilovecode
8,071 Points

Thank you Andrew, didn't think to check that! I also had the same problem. Maybe they must add a note to the video to add it to the HTML.