Technical Doc Page - Media query issues

So I have two questions

The first one is how to to get the border from the li to cover the width of the ul

The second one is that I tried to use a:

@media (max-width: 800px) {
    nav {
        position: block;
    }
  }

To start working on the nav to the mobile format, but the position doesn’t change. I changed the background just to test the media and it’s working, so the problem is in the position attribute.

Thank you.

PS: I tried to upload both images, but it only lets new users post 1 :sweat_smile:

block is for display.

position with direction or numbers.

Google your CSS in w3 schools or MDC (mozilla docs).

True though. I know about that resources… I tried everything, guess i was completly blind, what a stupid distraction! Do you know the answer for the li one?

Many things I could look for. I need to visit an online site or codepen. Then I can see all your code. I don’t remember having that problem. Did you use a style reset sheet? Declare it 100% width of the parent? Or use no-indent?

https://codepen.io/anon/pen/orPXVq

Here it is. Thank you

You have to remove the default padding on the ul.

nav ul {
list-style: none;
border-top: 1px solid black;
padding: 0;
}

At least I think that is what you are asking for?

Yeah, that solved it. I always forget the default values of the browser. Think i’ll start to use reset in every page.

Thank you

I’d also suggest learning to use the browser developer tools (Video). The DOM Inspector is super helpful in better understanding your layout Chrome or Firefox.

1 Like