What's wrong with my media query?

At the bottom of my css I put a media query to have the links in the navbar be centered evenly across the top of the screen for an iPhone screen. But when I go to devtools and click the responsive iPhone design they look garbled.

Hey, I’m not sure if this is what you were looking for. Check it out

It’s because you still have large side margins on the <li>s in the nav menu. Get rid of those side margins and they will center like you want.

I tried :

@media (max-width: 518px) { #navbar { justify-content: center; padding: 0px; margin: 0px 0px; } }

but now the center link is slightly below the left and right one.

It’s not the margins on the navbar that are causing the problem, it’s the margins on the <li>s.

Ok then:

@media (max-width: 518px) {
  li {
    margin: 0px;
    padding: 5px; 
  }
}

But now the links are squished together in the middle and not spaced evenly.

justify-content: space-between;

Puts them on the left side for some reason.

If you want to use justify-content to space out the <li>s then you need to set display: flex on the <ul>.

I already have display: flex; on the navbar, won’t that work the same?

only the direct children of the element you use display: flex on will be placed using flex.
you need to use it on the direct parent of the elements you want to use flex on

Ok well

@media (max-width: 518px) {
  ul {
    display: flex;
    justify-content: space-between; 
  }

doesn’t work either.

If you add width: 100% to the ul you should see the space distribution. I would probably go with justify-content: space-evenly instead as well.

Also, be careful with using // to comment out CSS. That is only a valid comment in SASS/SCSS, not plain CSS.

Are you familiar with the browser’s dev tools inspector? If not then you should get acquainted immediately as it is the developer’s best friend. If you hover your mouse over the <ul> in the inspector you should see on the page that the actual width of the <ul> is not taking up the entire width of the page and thus that is the reason the list elements are not spaced out. Using the inspector you can easily start playing with the CSS properties on the <ul> to experiment until you figure out how to get the <ul> to span the entire width of the page. If you were not doing this then I highly recommend for future problems you try to debug this way first before posting here.

P.S. The inspector will also show you that you still have some left padding on the <ul> that I don’t think you want.

Yes I see that now, but what’s confusing is when I click the ul element there is no padding property.

Ya, it’s because it’s a browser default and for whatever reason the inspector doesn’t show it in the properties pane. It bugs me too.

In Firefox you can enable showing browser styles. With the dev tools open press F1. Or use the menu.

Under the settings for “Inspector” tick the option “Show Browser Styles”.

You can also see the padding in the “Box Model” section of the “Layout” tab. You can also go to the “Computed” tab and tick “Browser Styles” to see the styles. You can use the filter box to search for the properties you are looking for.

So basically browsers will automatically add css styling to my page without me wanting it, and I will have to go searching for what exactly they added by default in dev tools so I can manually cancel it out correct?

Yes, they have done so from the dawn of time. That is one of the motivations for CSS reset/normalize as well.

You really do not need to remember all that many default styles. Besides knowing what styles are getting applied to your elements is your responsibility and is required. Learn and use the dev tools well.

Some people just add a margin/padding reset at the top. I just think if you are going to have to set the styles for all the elements that got reset why not just overwrite the default styles instead?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.