Flexbox doesn't center content in mobile version

HTML-CSS
1

This is my navbar: http://prntscr.com/11nfobs

But when I use media queries, I want my links to be in a column.
HTML:

<header>
      <nav id="navbar">
        <div class="logo">
          <a href="#home" id="home"> <img src="LaLiga.svg" height="50px" /></a>
        </div>

        <ul class="menu">
          <li><a href="#standings">Standings</a></li>
          <li><a href="#results">Results</a></li>
          <li><a href="#goalscorers">Goalscorers</a></li>
        </ul>
      </nav>
    </header>

css for mobile:

  #navbar {
    display: flex;
    flex-direction: column;
    height: 25vh;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

and this is how it looks like: http://prntscr.com/11nftp0

As you can see, items are clearly not in the center below the logo, how can I fix this?

2

Try removing the margin and padding on the UL

3

I tried the code you posted and it seems centered to me.

4

The list items are centered within the unordered list. Maybe you want the ul centered on the page.

5

didn’t help :frowning:

@jenovs it is not like on my screenshot?

@tlc35us yes, I want that but centering on #navbar didn’t help either, everything is the same if I add this:

  #navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 25vh;
  }
6

Maybe you could put the entire page online so we may interact with it. Your snippet works by itself, but keep in mind we don’t have the svg when we run it. Another thing, maybe you’re caught in the cache. Do the results change when you’re in incognito mode.

7

Yes, I just looked at the picture. The padding on the UL would push it to the right and not the left.

I agree, we will need more context (live version or more code) to know what is happening. BTW, how are you centering the logo?

8

Thanks guys, here is the codepen: https://codepen.io/argentinaivan/pen/VwPGvYv

on a mobile version, I would like these links to be right below the center of the logo, but they are moved to the left, doesn’t matter what I tried…

9

You have margin-right on the links.

Edit: You also have margin-left on the logo that you need to unset to center it correctly.

.menu a {
  margin-right: 50px;
}

.logo {
  margin-left: 20px;
}
10

Whichever way I try it I wind up putting left margin on the list. If you want the list items left aligned within the list you can just set the list to display:block;

11

@lasjorg FTW! I didn’t catch the right margin. Take it off in mobile and there you have it.

1 Like
12

Thank you very much guys, I didn’t spot this :slight_smile:

1 Like
13

You should totally learn the dev tools and use them.

The DOM inspector is like that spray they use on invisible laser traps in the movies. It lets you see the layout and do back-flips through the lazers…no wait that’s the movies…it just lets you see the layout and do boring stuff like discover margins and correct them.

14

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