I'm puzzled as to why my media query for `max-width: 470px` isn't functioning correctly

I'm struggling to get my code to work properly. I've tried adjusting some parts to be more specific and others more general, but it's not functioning as expected.

Please review my code and any advice or assistance would be greatly appreciated. (it won't let me post the actual code, so I'll just use placeholder text) kkkkkkkkkkk kkkkkkkkkkk kkkkkkkkkkk

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

My expectation was that the media query should take effect when my screen size is 470px or less, however, it does not seem to be working correctly.

Answer №1

The sequence of your media queries should be switched around - ensure that max-width: 470px comes before max-width: 1024px. This will prevent the second query from overriding the first one, as any width less than 470px is also less than 1024px.

Answer №2

Your banner content is looking great with the red background color set in this example. The styling adjusts for viewport widths less than 470px.

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

Click here to view the demo on CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Safari encounters issues with Flexbox child elements that exceed their assigned height dimensions

Encountering a peculiar Flexbox height dilemma specific to Safari. Interestingly, in Chrome, the center div perfectly fills the 100% height of the body div. Contrastingly, on Safari, the center div extends beyond the 100% height of its container; seeming ...

Scrolling in iOS 8 causing flickering problem with background image

Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling. The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering ...

Instructions for including a scroll bar in an HTML side menu

Can anyone help me figure out how to add a scroll bar specifically for the left side navigation menu? I've tried adding overflow-y: scroll; in different places, but it hasn't worked so far. I'm still learning web design and have been piecing ...

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

Exploring Vue and Webpack's tree shaking functionality, side effects management, and its impact on CSS: Loading unused component CSS

We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...

Issue regarding the functionality of CSS styling when applied to a button

Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...

Menu/navigation bar designed with floating lines and an array of color options

I'm currently working on implementing this specific menu into my Wordpress site. My main concern is figuring out how to customize the hover effect for each navigation item. Currently, the float line changes to red (background-color:#800; height:2px;) ...

Fixed navigation menu at the top of the screen

Can anyone help me with my navbar issue? I want it to stay on top of the page, but there's a huge gap between the top of the page and the nav bar. I've tried running a JS file, but it doesn't seem to fix the problem. Any ideas on how to make ...

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

Ensuring that all of the content is adaptable across various devices, from smartphones to high-definition 1080p screens

I am currently working on making my entire content responsive. While I have successfully made the background responsive using different @media resolutions, I am facing an issue with the image in the foreground that is not scaling accordingly. I tried putti ...

What is the most efficient method of organizing form components together?

After exploring numerous tutorials, I have yet to discover the ideal solution for properly marking up a form that contains logical groupings of elements such as labels, controls (input or select), and previous values - essentially single fields. My prefer ...

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

Combining Django Bootstrap input-group-addon with Model Form for seamless field integration

Currently, I am displaying my Django form in the following manner: <form action="/student/" method="post"> {% csrf_token %} {% bootstrap_form form %} <input type="submit" value="Launch" class="btn btn-primary"/> </form> I ha ...

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

Tips for integrating tooltips in a dynamic highcharts chart

This image shows the desired final output View Highcharts here and I am looking to merge the date and stock value in a single tooltip, how can this be achieved? highcharts ...

What is the best way to align two elements side by side using flexbox?

After trying to find a solution on this site without success, I realized that my situation is quite unique. I need to avoid changing the HTML code, minimize the use of classes, and refrain from using IDs. The current HTML structure I am working with inclu ...

a graphical representation of data organized in tabular form using

I am trying to develop a game where I need to generate a map using PHP. The goal is to create 100 table boxes in a specific pattern, but so far my attempts have not been successful... $field = 100; echo "<table border='3px' dir='ltr&apos ...

The final li element in the second unordered list is targeted by the selector ul li:last-child

Check out this JsFiddle Having trouble with the pseudo code :last-child. I want the style to apply to the li containing E, but it's affecting the last li in the .subNav. I've attempted a few solutions below, but none have worked. nav ul:first- ...

CSS is being applied on Internet Explorer 11 only after a hard refresh with Ctrl+F5

While my website loads perfectly in Chrome and Firefox, I have been experiencing issues with Internet Explorer 11. The CSS is not fully applying until after pressing Ctrl+F5 multiple times. It's strange because some of the CSS is being applied but cer ...