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 CSS - Beyond the Basics Working with Media Queries Adaptive Layouts Challenge

Posted by Marcelo Motta
Marcelo Motta
9,091 Points

CSS - Beyond the Basics Challenge is failing

Hello guys!

On challenge task 3 of 4 is required to write the following css:

.extra { display: block; }

I don't know if I am doing it right, but I think that I need to write it into the existent

@media screen(min-width: 769px) {
.extra { width: 23.40425319149%; }
}

This way isn't working. I also tried to put it on different sections on the code (out of the media queries, inside the phone media queries, creating another .extra class etc)

But I always got the "BUMMER!" error.

Any suggestion?!

style.css 
/* Phones to Tablets */
.col { float: left; }

@media screen(min-width: 481px){  
  .main {
      width: 65.957446808511%;
  }
  .secondary {
      width: 31.914893617021%; 
  }
  .secondary,
  .extra {
      margin-left: 2.127659574468%;
  }

}

/* Tablets to Desktop */

  .logo { float: left; }
  .main-nav { float: right; }

@media screen(min-width: 769px){  

  .main {
      width: 40.425531914894%;
  }

  .extra {
    display: block;
      width: 23.404255319149%;
  }

}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Media Queries</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <header class="main-header">
            <a class="logo" href="#">Logo</a>
            <nav class="main-nav">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
                <a href="#">Link 4</a>
            </nav>
        </header>
        <div class="content">
            <div class="main col">
                Main
            </div>
            <div class="secondary col">
                Secondary
            </div>
            <div class="extra col">
                Extra
            </div>
        </div>
        <footer class="main-footer">
            Footer
        </footer>
    </div>
</body>
</html>

1 Answer

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You need to keep your .col, .logo, and .main-nav selectors inside of your media queries. Put those back in there, and move the display: block below the width property. It may not like that you put it above it for some reason.

This code passed for me:

/* 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%;
  }
}

/* Tablets to Desktop */
@media screen and (min-width: 769px) {
  .logo {
    float: left;
  }
  .main-nav {
    float: right;
  }
  .main {
    width: 40.425531914894%;
  }
  .extra {
    width: 23.404255319149%;
    display: block;
  }
}
Marcelo Motta
Marcelo Motta
9,091 Points

Hello Collin!

Thank you for the help. What you wrote really makes sense to me. I think it's the right way.

But when I did this, the previous step (1 and 2) became "invalid".. I don't know why but they are not accepting these codes inside the media queries... just outside.. like I did.

Have you tested this in your account? The code passed without any problem?

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Yes I went through the challenge and the code I posted passed step 3. Step 1 and 2 became invalid when you tried because you moved the code outside of the media queries, which is where they wanted them in those steps.

Marcelo Motta
Marcelo Motta
9,091 Points

YES! It worked. Analyzing your code and I've discovered the issue:

I was writting the media queries like this: @media screen (min-width: 481px) {}

And you wrote: @media screen AND (min-width: 481px) {}

That made all the difference! Thank you for the help.

;)