I dont know why my `max-width: 470px`media query isnt working please help

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Secret Agent Supply Inc.</title>
    <link type="text/css" rel="stylesheet" href="./resources/reset.css">
    <link type="text/css" rel="stylesheet" href="./resources/style.css">
  </head>
  <body>
    <div class="company background-black">
      <div class="nine-w container">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/logo.png">
        <span>SECRET AGENT SUPPLY INC.</span>
      </div>
    </div>

    <div class="banner">
      <div class="nine-w">
        <div class="banner-content background-black">
          <h2>NEW ARRIVAL</h2>
          <h1>SPORT BIKES AND MOTORCYCLES</h1>
        </div>
      </div>
    </div>

    <nav>
      <div class="nine-w">
        <ul class="desktop">
          <li>Eyewear</li>
          <li>Apparel</li>
          <li>Gadgets</li>
          <li>Vehicles</li>
          <li>Classes</li>
          <li>Contact</li>
        </ul>

        <ul class="mobile">
          <li>Menu</li>
        </ul>
      </div>
    </nav>

    <div class="content">
      <div class="images nine-w">
        <div class="image-item">
          <div class="image-div">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/pen.png">
          </div>
          <span class="background-black">Exploding Pen</span>
        </div>

        <div class="image-item">
          <div class="image-div">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/watch.png">
          </div>
          <span class="background-black">Cellular Watch</span>
        </div>

        <div class="image-item hide">
          <div class="image-div">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/glasses.png">
          </div>
          <span class="background-black">Thermal Glasses</span>
        </div>
      </div>

      <div class="below nine-w">
        <div class="below-images">
          <span class="background-black">Location</span>
          <p>-47.346436, 84.32354</p>
        </div>

        <div class="below-images">
          <span class="background-black">Location</span>
          <p>0800 - 1800</p>
        </div>
      </div>
    </div>

    <footer class="background-black">
      <div class="nine-w">Copyright Secret Agent Supply Inc.</div>
    </footer>
  </body>
</html>

CSS

html{
  font-size: 18px;
  color: white;
  font-family: Helvetica;
}

.nine-w{
  max-width: 960px;
  margin: 0 auto;
}

.background-black{
  background-color: black;
}

 .company .nine-w{
    display: flex;
    align-items: center;
    padding: 0.66rem 0;
 }

.company img{
  height: 1.5rem;
  padding: 0 1rem 0 0;
}

.company span{
  font-size: 1rem;
}

.banner{
  height: 25rem;
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/moto.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.banner-content{
  max-width: 20rem;
  padding: 2rem 3rem;
  position: relative;
  top: 9rem;
}

h2{
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 0.25rem;
}

h1{
  font-weight: bold;
  font-size: 2rem;
}

nav{
    background-color: firebrick;
}

nav ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: firebrick;
  padding: 0.75rem 0;
}

.images{
    display: flex;
    justify-content: space-between;

}

.image-item{
  width: 30%;
  display: flex;
  flex-direction: column;
  border: 4px solid black;
  margin-top: 3rem;
}

.image-div{
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.image-item img{
  max-width: 8rem;
}
.image-item span{
  display: block;
  text-align: center;
  padding: 0.5rem 0;
}

.below{
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

.below-images{
  width: 35%;
  margin-bottom: 4rem;
}

.below-images span{
  display: block;
  padding: 1rem 0 1rem 2rem;
}

.below-images p{
  color: black;
}

footer{
  padding: 5rem 0;
}

.mobile{
  display: none;
}

@media only screen and (max-width: 470px){
  .banner-content h2{
    font-size: 0.77rem;
  }

  .banner-content h1{
    font-size: 1rem;
  }

  .banner-content{
    padding: 1rem 2rem;
    top: 10rem;
  }

  .banner{
    height: 15rem;
  }
}

@media only screen and (max-width: 1024px){
  .hide{
    display: none;
  }

  .image-item{
    width: 47%;
  }

  .desktop{
    display: none;
  }

  .mobile{
    display: block;
    text-align: center;
  }

  .banner-content h1{
    font-size: 1.5rem;
  }
}

If this is a lesson, then please post a link to the exercise. Thanks.

https://www.codecademy.com/programs/1b3b6018de87a4895aa52b13e2aad602/content-items/dd497c8e1e1003fa6b4c1eff9d4a7ada

1 Like

Sorry, it would seem we cannot access that. Please speak with an advisor or post on Slack.

what information do you need so you can help me
cause i really need it and i dont know where ive gone wrong
or where to go or how to finish it

We’ll need the source code for reset.css. May we take it that the complete style.css is posted in your OP?

What´s a OP?

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Opening Post, the object, or the member, Original Poster.

what else do you need to help me?

A set of screen shots at various widths, and a description of what you expect to happen, as opposed to what is actually happening.

So the first and fourth image is of the desktop version
And the second and third is of 1024 px (with media query)

what i tried to do is create another media query for 470px and it isnt working and you can see my attempt in the code posted previously

yes, I am the OP
do you have an idea of whats going on?

Not entirely, no. Still trying to piece my way through it. It would be nice to see a set of selectors that occur in all three states, and have unique values in each. It would also be nice to see more of a float behavior for narrow screens so there is a single column.

.banner-content h2
.banner-content h1

in an effort to fix it i tried to make it less specific and left it as h1 and h2

those two are just some

Below 1024 the menu disappears. Are you planning to put a hamburger there?

Would Flex of Grids help you out of this dilemna?

well the menu is supposed to disappear and turn into the word menu, whats a hamburger?
and the problem i have is that the media query that i creted isnt ‘activating’ when the screen is 470 px or below, its in the code above

@media only screen and (max-width: 470px){
  .banner-content h2{
    font-size: 0.77rem;
  }

  .banner-content h1{
    font-size: 1rem;
  }

  .banner-content{
    padding: 1rem 2rem;
    top: 10rem;
  }

  .banner{
    height: 15rem;
  }
}

*created (correction)

Not to point anything out, specifically, but consider of list of properties, A, B, C, that will all have their own rule in each state. Consider the desktop state as the default, but do not dedicate any HTML to just that state. In other words, no .desktop class. The default state is the desktop without giving it a special class.

Construct the page exactly how you want it to appear on the desktop (> 1024). Scale it for the tablet (480 ~ 1024), and scale it for the smart phone (< 480).

Granted some things are not going to change regardless the screen, so obviously the default style rules will always apply across the board.

A default
B tablet
C phone

The selector rules in the media queries will override those in the default style sheet. Use the same selectors for this purpose.

Be sure that for narrow screens it is reduced to one column. No splits on the screen. The user will happily scroll as opposed to looking at smaller images.

I realize this might be a departure from the lesson plan, but without the instructions, we’re at a loss. Can you mass copy and paste the instruction in a post? Use the [details="Instructions"][/details] markdown to hide how long it is.

Instructions

Secret Agent Supply

Using the tools on your personal computer, you’ll build a responsive website for Secret Agent Supply Inc., the world’s leader in secret agent tech.

In this project, you will build a full desktop website, then you’ll use your knowledge of responsive web design to make the Secret Agent Supply’s website look great on any device.

In addition to the step-by-step instructions below, we will provide the necessary images and colors to complete the website.

The solution to this project is displayed to the right. Use this as a reference along the way. Mark the tasks below as complete when you finish them. This will ensure you are staying on track.

If you get stuck during this project or would like to see an experienced developer work through it, click “ Get Help “ to see a project walkthrough video .

Tasks

7/8Complete

Mark the tasks as complete by checking them off

Open your file manager and create a new folder called SecretAgentSupply . Inside of this folder, create the following items:

  • A file named index.html .
  • A folder named resources .

Inside of the resources folder, create the following:

  • A folder named css with a style.css file, and a reset.css file inside. The reset.css file should contain thiscode.

Open index.html in a text editor and add the boilerplate HTML.

Title the page Secret Agent Supply Inc. .

Also, link resources/css/style.css and resources/css/reset.css in the <head> section of index.html .

In addition, you’ll need the following images to complete the web page:

Click here to look at the finished page design. Using the finished design, create the HTML structure, including the logo, main banner, navigation, product grid, location, hours, and footer in index.html .

Nice work! At this point, you should have the page’s HTML written.

Begin writing the CSS to make the page match the desktop view of the page.

For reference, click here to see a design spec of the website’s design. Design specs outline important design specifications to help you replicate the design in HTML and CSS.

Great! Now you should have a good looking desktop site.

Now, resize the page to different widths, from large to small. You may notice the page breaks, or does not appear correctly when viewed on smaller screens.

Write a media query that targets a screen width less than 1024 pixels. 1024 pixels is near the size of a tablet in the portrait orientation.

Inside of the 1024 pixels media query, make changes so that the site appears as in the tablet design here. You can find the design spec here.

The changes include:

  • Changing the font sizes in the main banner.
  • Making the navigation display a “Menu” button instead of all the menu options.
  • Making only two products appear, both taking approximately half the screen’s width.

Resize your browser to an even smaller width, to simulate a phone’s screen.

Write a media query that targets screens with a width less than 470 pixels.

Refer to the mobile design here and the corresponding design spec here. Use these resources to write CSS that makes the page consistent with the phone-sized designs.

The changes include:

  • Making the headline appear at the bottom of the banner and take up the width of the screen.
  • Changing the banner’s font size to match the design.
  • In the product section, making only one product visible. It should take up 90% of the width of the screen.
  • Making the “Location” and “Hours” elements stack on top of each other.
  • The footer’s text should be centered in the screen.

Resize your page and make sure that the appearance of the page changes in response to the screen’s width.

Congratulations! You just built a responsive website that looks great no matter what device it’s viewed on.