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
Josh Lee
Courses Plus Student 6,290 PointsStuck on Adaptive Layouts Challenge
Under "Phones to Tablets," create a media query that floats the .col elements left if the viewport is 481px or wider. Then, add all other "Phones to Tablets" CSS rules inside the media query.
I think something is wrong here. First off I'm using (min-width: 481), but it's telling me not to use "min-width." I change it to "max-width" and it gives me a different error.
After changing to max-width I get the error "Did you float the '.col' divs left. I've tried to do that two ways:
1)
.main, .secondary, extra { float: left; }
2) Add the floats underneath where the selectors are already being used. Ex.
.main { width: 65.957446808511%; float: left; }
Also I looked in the HTML and the class are two words long; there's a space between words. I thought you could only use two word classes/IDs if you used a - or _. The css is only using the first word of the class.
Here is my CSS.
@media screen and (max-width: 481) { .main, .secondary, .extra { float: left; } .main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; }
}
4 Answers
John Romby Andersson
8,453 PointsHere is the solution to the first part of the challenge:
/* Phones to Tablets */
@media screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
}
.secondary {
width: 31.914893617021%;
}
.secondary,
.extra {
margin-left: 2.127659574468%;
}
}
Let me know if you get stuck on the second and/or third part too mate. :)
John Romby Andersson
8,453 PointsHi Josh,
Yes, selecting the class with the name .col in your CSS, will affect every element that has that specific class tag in your HTML. That also means that if you don't have a HTML element with the class tag of .c and/or .co you can't select them in your CSS.
One single class can not contain spaces. So if you have some HTML like so:
<div class="foo bar">Hello world</div>
Then that simply means, you have two classes. One class with the name .foo and another with the name .bar.
And remember that multiple HTML elements can have the same class tag, but not the same id tag.
Hope that helped you out mate? :)
Regards, John
Josh Lee
Courses Plus Student 6,290 PointsThanks, that worked. Will using ".col" affect all classes with the word "col?" If so, would the following selectors work for this specific example: ".c" or ".co" ? Also, can Classes contain spaces in their name?
Josh Lee
Courses Plus Student 6,290 PointsThanks a ton, John! I wasn't understanding that "col secondary" was two different classes. Thanks for explaining it!
John Romby Andersson
8,453 PointsGlad that helped you out mate :)
Would you mind trowing in a Best Answer also?
Cheers :)