Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Justin Robshaw
Justin Robshaw
1,215 Points

Why is Chrome device simulator not showing the preview properly?

After following all of the media query and the meta tag inputs (I rechecked to make sure I didn't make any mistakes to what was shown in the video), when checking to see how it looks on Chrome device simulator, the title isn't displaying properly and all of the content isn't centered as Guil shows in his example.

Here's a snapshot of my workspace - https://w.trhou.se/tgww1egvlw

On a side note, for the media queries, why are the max-widths and opening curly braces highlighted in red?

Thank you, J

I am in the same boat, very aggravating.

Jiajun Zou
Jiajun Zou
1,471 Points

Not working for me either :(

1 Answer

Hi Justin,

I had a quick look and your media query looks fine; however, you have missed a few lines above as follow:

1- The font face part (lines 1-7) 2- The gradient transparent line on top of the header's background image (lines 91-93): * These have nothing to do with the responsiveness, but they definitely make your web page look different than Guil's. 3- The h1 margin (line 35): margin: 12px 0 0; 4- The title (lines 97-103) mainly the border and the padding: border-bottom: 2px solid; padding-bottom: 10px; 5- The arrow top margin (line 172): margin-top: 150px;

Also, there is something wrong with your margin on small devices, though I couldn't figure out the reason.

Feel free to check out my workspace and see if it works for you: https://w.trhou.se/89hzvzk8p7

Hope that helps.

Regards, H