I want suggestions and feedback on my Technical Document page, confusion about @media

I learned from last time and used a website to check for any open tags or excessive closings, and manage to get all sixteen tests passed without asking for assistance. However, it is still far from done.

As you can see, the navbar is too big. I want to make it smaller, and also use a media query to make it so that when the page get’s small enough, the logo and document header (Order of Mata Nui) becomes hidden, and the links spread out across the top of the screen, instead of staying to the side. I’m also a bit stumped on whether if I should just make the links font-sizes smaller, or add a scrolling bar and space the links apart so the scroll bar isn’t just sitting there kind of useless. And then I want to stylize the scroll bar and put lines in between the links, I gotta figure out how to do that.

The text fonts I should be able to figure out on my own. What still stumps me is how to use media queries. For some reason, they’re just so confusing to me, and not only do they never work like how I expect them to, but I’m not even sure what to look for. I just want the entire page to resize appropriately when on a smaller screen, whether it be mobile, or just a smaller desktop window.

What are some good resources for learning about media queries?

I’ve also noticed that I used a lot less div’s this time around. Is that bad? I think I only have like, one or two divs being used here, and according to the border I applied, it seems to be doing nothing.

Hi,

Question for you. Did you start coding this for mobile first? I’m guessing not, but then everyone (including myself) has done it this way a gazillion times. We always want to see the big product first. If you develop for mobile first, then as you expand the page ( width usually ), you’ll then see where things begin to look a bit funky, THEN you’ll create a media query for this larger page size. So, let’s say up to 560px wide things are looking good. But after that, things look a bit off and you have to reposition something or make something bigger. That’s when you add the media query. So you might go…

@media(min-width: 560px){
   header h1 {
     font-size: 3rem;
  }
}

Min-width is the minimum width at which this query will be active.

Hope this helps.
D

Ugh I’m gonna have to redo at least one of those sites all over again. Might as well be the product landing page one.