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 channonhall
channonhall
12,247 Points

Can you help with challenge task 4 of 4?

Finally, create a new media query that sets the width of .wrap to 980px if the viewport is 1000px or wider. I forgot how to do it And forgot the video of it.......I tried to figure it out but keeps saying "Bummer!"

style.css 
/* Phones to Tablets */
@media only 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 only screen and (min-width: 769px) {
  .logo {
    float: left;
  }
  .main-nav {
    float: right;
  }
  .main {
    width: 40.425531914894%;
  }
  .extra {
    display: block;
    width: 23.404255319149%;
  }
}

@media only screen and (min-width: 1000px) {
  .wrap {
    width: 980px;
  }
}
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

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Channon,

Your code is correct. I just copied and pasted it into the challenge and all 4 tasks passed. So, I'm not sure where you are running into a problem?

:)

channonhall
channonhall
12,247 Points

oh thanks.....maybe cause I needed to refresh the page. thanks jason! :)