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

Paul Ozag
Paul Ozag
11,369 Points
Posted by Paul Ozag
Paul Ozag
11,369 Points

problem with Adaptive Layouts with Media Queries, part 1 of 3

challenge is to : 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.

here is my code:

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

i get the "bummer, did you float .col to the left?"message.

any ideas?

3 Answers

Derek Hanson
Derek Hanson
7,838 Points
Derek Hanson
Derek Hanson
7,838 Points

Hi Paul,

Did you try setting your max-width with a pixel size? (max-width: 481px;)

That is the one thing I notice. Hope this helps.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

You need to define px right after your size declaration like this:

@media screen and (max-width: 481px)
Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

I don't know what challenge you are on; but if it wants you to float it left if it is 481px or wider you need to use @media screen and (min-width: 481px). max-width: 481px; tells the computer to do it if the view-port is 481px or lower. Hope that help :)

Paul Ozag
Paul Ozag
11,369 Points
Paul Ozag
Paul Ozag
11,369 Points

thanks all - was indeed the px issue as well as having the min/max thing reversed -- appreciate it.