What Am I Doing Wrong?

Can you post your code? both inside the media query and outside.

Thanks!

This is the code inside of the media query. it does not change the layout on the web page, but appears to be what the instructor is doing and instructing me to do.

@media (min-width:769px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }

  .name,
  .main-nav,
  .main-nav li {
    display: inline;
  }
}

But if I place the inline rule outside of the media query, whether before or after it, the layout does what it is supposed to do, as shown in the video.

@media (min-width:769px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }
}

 .name,
    .main-nav,
    .main-nav li {
      display: inline;
    }

Thanks for any insight you can provide.

Constance

My guess is your window size doesn't fit the media query filter, which in this case is 769 pixels. When the code is inside the media query, try making your window wider than 769 pixels and see if you don't get the desired effect.

After all, changing behavior based on window/screen size is what media queries are for to begin with!

Thanks for your response, Steven. Unfortunately, when the inline rule is inside the media query resizing my window does not change anything; at all widow sizes the elements are displayed block. Resizing does change the layout when the rule is outside of the media query.

Also, I thought the point was to display everything as a block on smaller screens and display them inline on wider screens, so it doesn't make much sense that we are creating inline displays for smaller screens.

I guess for now I am just going to add the new rules outside of the media query where they seem to be working. I used media queries successfully in How to Build a Website, so I'm mystified by this problem.

Thanks again for your response.

Thanks for your response, Hazel. I am using Firefox. I built a website in the How to Build a Website course and the media queries there worked just fine. I am stumped as to what's going on.

No, I never resolved this issue. I even reached out to the instructor via Twitter and after I linked to this post with the code I never heard anything back. I ended up just completing those modules without have the responsive design work the way it is supposed to.

I am generally paranoid regarding Windows 10 so for now I'm blaming the problem on that though I am still using Firefox. Or maybe something is amiss in the code we are instructed to write. It remains a mystery to me.

Sorry I couldn't be of any help to you.

I never was able to resolve this problem. People suggested trying different browsers. Maybe you could try tweeting the instructor. I tried this, but never got a follow up response after linking him to this thread and the relevant code.

Can you post your html? Have you checked your html part? Such as missing closing tag or wrong class name provided?