MEDIA QUERY isn't working at my page

1

Why this(snippet below) is not working at my Product landing page

  @media(max-width:414px){
      #header{ 
        display:flex;
        flex-direction: column;}
    }
2

Your media query is working, you are changing the wrong class though.

From looking I am getting you wish to display your nav links as a drop down instead of in a row. In order to do so you need to also change the .nav-link class.

You will need to remove the max-width:100px style as this will prevent the links from being able to expand to fill the width of the screen.

A quick solution to your issue would be:

@media(max-width:414px){
  #header{
    display: block;
    width: 100%;
  }
  .nav-link {
    max-width:100%;
    width:100%;
    display:block;
  }
  #logo {
    width: 100%;
    display: block;
  }
}

You have declared this twice by the way, once where you have pointed it out and once at the bottom of the file. You need to remove one of them. I would also recommend that fine tune your media queries so they do not overlap.

For example, add a min-width as well as your max-width

Hope this helps to set you on your way.