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 Media Query Basics

Alexandra Symeonides-Tsatsos
Alexandra Symeonides-Tsatsos
1,296 Points
Posted by Alexandra Symeonides-Tsatsos
Alexandra Symeonides-Tsatsos
1,296 Points

Why aren't my media queries working?

Hey! I'm working on the basic css track and I can't get my media queries to take effect on my website. Its probably a simple mistake but I just cant see it.

Here is my workspaces https://w.trhou.se/3vo9sg7bos and here is my website http://port-80-20hym9ijk1.treehouse-app.com/

Thank you!!! <3

Brian Clark
Brian Clark
3,418 Points

Hi Alexandra,

I was having a similar issue with that particular media query. I checked my syntax multiple times to make sure that there weren't any mistakes, and I couldn't find any. For some reason, my browser (Chrome) wouldn't display the changes when I changed the size of the window.

I then went ahead and added the second media query from the video. Strangely, both queries worked when I resized the window.

I'm wondering if there's some sort of issue with Workspaces? Anyway, I thought I'd chime in since I was having the same problem...

Marcus Parsons
Marcus Parsons
15,719 Points

Brian,

Please refer to my answer as to why the media queries weren't working.

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hi Alexandra,

You have a couple options with your media query. If you want your media query to apply all formats, just add the and keyword between all and the parenthesis for the selector. Or you can target the screen specifically. Going along with what you want, I just added the and keyword.

Also, the selector right above the media query for group:after was missing an ending }. Here's a new snapshot for your workspace: https://w.trhou.se/fvn7p5vt3s

Amir Sećkanović
Amir Sećkanović
2,887 Points
Amir Sećkanović
Amir Sećkanović
2,887 Points

@Marcus Parsons,thank you. i had the same issue :)