Technical Documentation Page - @media problems

#1

Hey everyone,

I’m having an issue with my nav element. Technically, the code passes the FCC tests, but it just doesn’t look right. I manage to get my nav to move to the top of the page, but it maintains its same shape and doesn’t extend to the full vw.

The problem is pretty obvious once you look at the page. Just open full screen and then begin to close it to about 600px

Here is a link to my codepen:

https://codepen.io/tlot02/pen/xxwzYYy

Any help is appreciated!

#2

your media query is not overriding the nav CSS while screen size changes. So what you have to do is add !important to its style attributes or you can increase the weight of selector.

quick guide - https://www.w3schools.com/css/css_specificity.asp

try this:

@media (max-width: 600px) {
  body {
    flex-direction: column;
  }

  body nav {
    height: 350px;
    width: 100%;
    overflow-y: scroll;
  }

  main {
    width: 100%;
  }
}
#3

Well, you have to move your nav element inside of the body. :wink:

After that the solution given by @Rajesh-Royal will work!

But the more accurate way of solving this should be to move all your media queries at the bottom.

  • ALWAYS KEEP MEDIA QUERIES AT THE BOTTOM.
  • AND DO NOT WRITE ANY HTML CODE OUTSIDE OF BODY :sweat_smile:
2 Likes
#4

Thank you! I appreciate your time and helpful response.

1 Like
#5

Thanks for those tips! I appreciate the response!

1 Like
#6

I didn’t see that media query is at top :sweat_smile:

#7