Why this(snippet below) is not working at my Product landing page
@media(max-width:414px){
#header{
display:flex;
flex-direction: column;}
}
Why this(snippet below) is not working at my Product landing page
@media(max-width:414px){
#header{
display:flex;
flex-direction: column;}
}
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.