CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Matthew Cahn
Matthew Cahn
6,301 Points

Pretty sure I got this one right. Perhaps a bug in the checking code.

Pretty sure I got this one right. Perhaps a bug in the checking code.

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>
style.css
/* Complete the challenge by writing CSS below */

/* 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 (min-width: 769px) {
.logo {
  float: left;
}
.main {
    width: 40.425531914894%;
}
.extra {
    width: 23.404255319149%;
  display: block;
}
}

4 Answers

Try just using "@media (min-width: XXXpx)" for your media queries. I didn't have a problem with that passing.

geoffrey
geoffrey
28,724 Points

You are right, tested and approved.

Joel Encinas
Joel Encinas
9,683 Points

I can assure you that the checking code is OK.

As i see in your CSS code you are in the 2nd step and missed the:

main-nav{
float: left;
}

In your /* Tablets to Desktop */ code.

I´m gonna leave the hole CSS code of the challenge, just in case u need it.

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

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

.main {
    width: 40.425531914894%;
}
}

@media only screen and (min-width: 1000px) {
  .wrap{
    width:980px;
  }
}

Best Regards.

Haven't watched the course you're referring to, but I'm pretty sure you're just missing the word and in this line in your CSS:

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

Right under the /* Tablets to Desktop */ comment.