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
Tony Shangkuan
7,200 PointsWhat is the need of "and" operator here in this case? @media screen and (min-width: 730px){ }
This is the example the instructor used in the course, and since there is only one condition to be assigned, what is the point of using this "and" operator?
@media screen and (min-width 730px) { ul li { display: inline-block; width: 30% } }
1 Answer
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 PointsHey Tony Shangkuan !
This query specifies two conditions:
1. The media type should be screen. This means the styles inside will apply only to screen displays (like computer screens, phones, tablets, etc.) and not to other media types like print.
2. The viewport should have a minimum width of 730px.
Both of these conditions must be met for the enclosed styles to be applied, hence the and operator.
I haven't written it this way in a while though because writing it like...
@media (min-width: 730px) { ... }
only specifies the viewport width condition, not the media type. Modern web browsers default to the screen media type if none is specified. So, in most practical scenarios, these two media queries will behave the same way.
Tony Shangkuan
7,200 PointsThanks so much for the clarification !! Now I got it.
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 PointsTravis Alstrand
Data Analysis Techdegree Graduate 45,997 PointsYou're very welcome!