CSS Unused CSS Stages Media Queries Media Features and Media Types

Media Q

Create a new media query that sets the width of .wrap to 700px if the viewport is 800px or wider. I tried both min-width and max-width ,but is not working. I GOT IT NOW.

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">
        <h1>Hi There!</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus ante, luctus vel euismod ut, suscipit quis ligula. Vestibulum augue ante, semper sit amet congue non, faucibus sit amet lacus.
        </p>
        <p>
            Maecenas lobortis porttitor nisi, quis congue neque porta at. Donec interdum arcu eu ante semper nec venenatis ipsum dignissim. Vestibulum ultricies mi quis lectus suscipit fermentum.
        </p>
    </div>
</body>
</html>
style.css
/* Complete the challenge by writing CSS below */
@media screen and (max-width:768px){
  body{background:#ff6347;color:white;}
}

@media screen and (max-width:480px){
  body{background:#4682b4;}
}

@media screen and  (min-width:800px) {
  .wrap{width:700px;}
}

1 Answer

Erik McClintock
Erik McClintock
45,782 Points

Hello,

Because the challenge is asking you to create a media query for a browser width of 800px or wider, we know that you need to use the min-width property ("800px or wider" means "the browser is at least 800px wide", or "a minimum width of 800px"), and you need to remove your "and (min-width: 480px)" addition to the query. The query should simply be a min-width check on 800px.

Erik