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 The Media Queries Solution

Posted by Thomas Bathurst
Thomas Bathurst
1,576 Points

Why was I under the impression we had to use @media screen and (min-width)?

So I completed the task without looking at the solution video, however for each media query I had used the following code:

@media screen and (min-width= 576px) {}

It achieved the exact same result, however upon watching the solution video I noted that the tutor didn't use the "screen" media type. Having made the changes to my code, I have also confirmed that it works without the screen media type being specified... so what exactly is the screen media type used for?

Sorry if this seems like a silly question, I am a little confused as to it's function/purpose.

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Thomas Bathurst! The media type, in this case screen is optional. If you do not specify it, it automatically assumes all, I believe. The other media types are print and speech. The print would be used if you wanted to make sure that documents showed up nicely in a "print preview" mode. Screens are for screens. And speech has to do with speech synthesizers.

Because we want this CSS to apply to all, it's reasonable to leave out media queries that are specific to speech and print.

Hope this helps! :sparkles:

Here's the Media Types documentation. And yes, the default is all :smiley:

Thomas Bathurst
Thomas Bathurst
1,576 Points

Thanks so much for clearing that up Jennifer. The answers seem so obvious when somebody explains it to you!

My head hurts 😅