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 Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Justin Robshaw
Justin Robshaw
1,215 Points
Posted by 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

Chantal Baxter
Chantal Baxter
2,003 Points

I am in the same boat, very aggravating.

Jiajun Zou
Jiajun Zou
1,471 Points
Jiajun Zou
Jiajun Zou
1,471 Points

Not working for me either :(

1 Answer

Hassan Al Manawy
Hassan Al Manawy
24,859 Points
Hassan Al Manawy
Hassan Al Manawy
24,859 Points

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