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

Posted by Alex Weinberg
Alex Weinberg
2,726 Points

When looking at website preview on phone, the media queries are not acting like they are supposed to.

So I copied the address from the workspaces preview to my phone browser just so I could see how it looked on my phone. When it shows up on my phone, it's treating it as though it were being displayed on full desktop browser width. When I resize my browser to be narrow on my computer, the it changes based on what I have set the media queries at. Any reason why it's not showing up like that on my phone?

2 Answers

Ken Ortman
Ken Ortman
3,947 Points

Some devices force the entire width of the webpage on their screen so that webpages that are not optimized for phones still look okay.

You can put a meta tag in your HTML Head to override that.

<meta name="viewport" content="width=device-width">
Alex Weinberg
Alex Weinberg
2,726 Points
Alex Weinberg
Alex Weinberg
2,726 Points

That did it. Thank you!