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 Daetuan Snagg
Daetuan Snagg
3,357 Points

Code Challenge: Adaptive Layouts with Media Queries

My problem is with Task 1, "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." This is my code:

@media only and (max-width: 481px) {
.main {
    width: 65.957446808511%;
}
.secondary {
    width: 31.914893617021%; 
}
.secondary,
.extra {
    margin-left: 2.127659574468%;
}
  .main,
  .secondary,
  .extra {
    float: left;
  }
}

What am I doing wrong?

Viktor Léhner
Viktor Léhner
12,771 Points
Viktor Léhner
Viktor Léhner
12,771 Points

Try this:

@ media screeen and (min-width:481px) {
  .col {
    float:left;
  }
}
Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Daetuan Snagg,

I just tried this and I honestly wasn't able to make it pass either. Guil Hernandez should be able to help us figure it out. :)

Daetuan Snagg
Daetuan Snagg
3,357 Points

Thanks Victor, it actually worked and i saw what the problem was ( I should have put screen, instead of only) and figured everything else out from there. Thanks so much.

Michelle Pepe
Michelle Pepe
Courses Plus Student 6,125 Points

Viktor, it's almost right. you can't space @ media and screeen is spelt wrong.

3 Answers

Michelle Pepe
PLUS
Michelle Pepe
Courses Plus Student 6,125 Points
Michelle Pepe
Michelle Pepe
Courses Plus Student 6,125 Points

@media screen and (min-width:481px) { .col { float:left; } }

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Daetuan Snagg,

You're close. Instead of the max-width media feature, you'll need to use one that checks for a minimum width and wider.

It looks like you still need to declare a float: left for .col. After that, you simply need to copy and paste the 3 CSS rules under /* Phones to Tablets */ into the new media query.

Hope this helps. :)

John DeWolf
John DeWolf
2,485 Points

@media screen and (max-width: 481) { .col {float:left;} .main {width: 65.957446808511%;} .secondary {width: 31.914893617021%;} .secondary, .extra {margin-left: 2.127659574468%;} }

Hi Guil,

I believe I have all the requirements but I'm still getting the error "Did you float the '.col' divs left?" Can you give me any advice?

Thanks,

John

John DeWolf
John DeWolf
2,485 Points

@media screen and (max-width: 481){ .col { float:left;}

.main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; } }

^ A little better formatting^

Also, with the way this is worded, shouldn't it be min width?

Thanks again

Aaron Uyehara
Aaron Uyehara
15,131 Points
Aaron Uyehara
Aaron Uyehara
15,131 Points

@media screen and (min-width: 481px) { .col {float: left;

}

.main { width: 65.957446808511%; } .secondary { width: 31.914893617021%; } .secondary, .extra { margin-left: 2.127659574468%; }

/* Tablets to Desktop */

.main { width: 40.425531914894%; } .extra { width: 23.404255319149%; } }

I had forgot the "and" once I added that it was all good. lol thanks Team Treehouse!!