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.

Andrew Rusli
Andrew Rusli
6,577 Points

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.

Andrew Rusli
Andrew Rusli
6,577 Points

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,069 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.