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 Getting Started with CSS Layout Using a Mobile First Approach

Lisa Weil
Lisa Weil
4,919 Points

I've finished the mobile version of my website but when I go to inspect it using my dev tools it looks different.

I really hope I can explain this well.

I've just finished the mobile version of my website. I did this by making my window as narrow as possible like Guil does to show how it will look on a mobile device as I worked on it. I haven't added any media queries yet.

During the process of making this, whenever I went to inspect it using my dev tools, it would only show it as a desktop website. No matter which phone I choose, Galaxy, iphone, tablet... it never shows the simple one column layout where everything fits perfectly on the screen. It only shows up as a huge desktop layout with one small column going down the middle.

Is this because I didn't use responsive coding? Percentages and ems?

First of all, you need to add value in percentages and also you need to add media queries. Please don't forget to add viewport line inside <head> tag.

1 Answer

You did not use media queries that's all