CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

media queries

Create a new media query that sets the width of .wrap to 980px if the viewport is 1000px or wider.

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

1 Answer

robertm
robertm
13,570 Points

Your media queries look okay to me, but you aren't closing them properly which is probably why this answer isn't going through.

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

@media only screen and (min-width: 769px) {
  .logo {
    float: left;
  }
  .main-nav {
    float: right;
  }
  .main {
    width: 40.425531914894%;
}
.extra {
  display: block;
    width: 23.404255319149%;
}
}