How to make ul inline responsive?

Asked

Viewed 526 times

0

I want to make this code responsive, but always stop being responsive when there are two lines and three columns.

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 1em;
  margin: .25em;
  background-color: #F1F1F1;
  text-transform: uppercase;
  width: 16em;
}
<nav>
  <ul>
    <li><a>Dados Pessoais</a></li>
    <li><a>Meus Objetivos</a></li>
    <li><a>Conhecimentos</a></li>
    <li><a>Formação Acadêmica</a></li>
    <li><a>Cursos Complementares</a></li>
    <li><a>Idiomas</a></li>
  </ul>
</nav>

css css3 responsive-layout

  • Here is responsive. What you wanted exactly?

  • Put these properties in a file and use screen simulator on them that it Uga is not responsive

  • That’s what I did. According to the screen size, these buttons will align automatically.

  • But you changed by screen or browser simulator? Why the screen is normal now when simulates a mobile phone is not responsive

  • Yes, by devtools with responsive screen.

1 answer

0


Have you tried it inside the <head></head>?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • Markin worked, thanks. But you can explain what these properties do?

  • https://www.w3schools.com/css/css_rwd_viewport.asp

Browser other questions tagged css css3 responsive-layout

You are not signed in. Login or sign up in order to post.