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
Need help implementing media queries
Working through the responsive websites section and having trouble with implementing media queries: http://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/implementing-media-queries-2
I need to:
Add the appropriate CSS code to the media query so that ".contact" and ".menu" fill the entire container width when the device or browser width is at most 480px wide. Your code from each task should be added to the code written in the previous task.
But I don't totally understand what I'm doing. I did the same thing in the video, added all the grids to the code and set them to 100% but it's saying it's a no go.
Also, I'm wondering if you guys have thought about having an answer book somewhere for these code challenges. There has got to be a quicker way around it. I usually use w3 schools for reference, but I couldn't find anything on media queries there except pdfs of standards. It wasn't quite what I needed.
Here's my code:
.cupcake:nth-child(2) {
border-top: 1px dotted #FAF3BC;
}
.contact {
width: 35%%;
margin: 5% 0;
padding: 3%;
float: right;
background-color: #2e0400;
border-radius: 15px;
}
.contact span {
color: #B22316;
font-weight: 600;
}
/* Mobile ----------- */
@media screen and (max-width: 480px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {width: 100% }
}
</style>
</head>
<body>
7 Answers
James Barnett
39,199 PointsA good media queries reference can be found over at Sitepoint.
If you haven't already done so, I'd suggest you work your way through the CSS Foundations deep dive, particularly the badge on Framework Foundations which discusses how grids work.
Basically here's how it works:
- Break up your page into a series of columns
- Calculate the width you want each column to be
- Each column takes up a particular width on the page
- The column is actually a class with CSS to position elements on the page
Denisse Cabieses
6,411 PointsAndrew-
For that code challenge you do not need to change the width of the grids they specifically want you to target ".contact" and ".menu" therefor they want you to make the divs of .contact and .menu to take the entire space when seen at 480px. Sometimes for the code challenges you do not need to copy exactly what is on the video. I would recommend for you to watch the video again so you would understand what exactly they are talking about. Another tip is to really see what they are asking, sometimes it helps to write it down in order to better understand it. Hope this helps!
James Barnett
39,199 PointsUsing the W3Schools site as a reference is considered a worst practice. You can read more about this over at W3Fools
W3Schools is not affliated with the W3C in any way and are using it's trademark without it's permissions.
Instead you should be using:
James Barnett
39,199 Points@Denisse - Great suggestions about working on the code challenges.
Denisse Cabieses
6,411 Points@James- Thanks! I feel that It is always better to try to explain and make the person understand how to figure out the problem instead of doing it the easy way and just giving out the answer.
Kris Jolls
5,157 PointsGreat advice thanks James I did not know that about w3schools as I use them as a reference too. Going to check out your links. Thanks.
Ryan Carson
23,287 PointsThanks for chiming in Denisse and James - you rock :)