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

Posted by Samuel Scurville
Samuel Scurville
Courses Plus Student 1,893 Points

Write a media query at 705px where the layout begins to break, that forces grid_1 through grid_6 to span 100% width of the container

i cant seem to write the write the correct media query for 'Write a media query at 705px where the layout begins to break, that forces grid_1 through grid_6 to span 100% width of the container'

can anyone help?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Break it down into bite size chunks. First your media query

@media screen and (max-width: 100px) {

}

You have to decide for this code challenge if you need max or min width, and what size to set it at (replace my 100px)

Inside of that, you need to write your code for your selectors.

grid_1,grid_2,grid_3

and so on. But you need to double check whether these should be comma separated selectors or not.

And how do you make something span 100%? That's not too hard

width: 100%;

will cause that selector to span 100% of it's parent container. All of that will not be applied until the screen is at the size that matches that media query.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries