HTML/CSS Navigation list elements dont resize when window is resized

semih9981
March 2, 2023
275 views
0 votes
2 Answers

Ive been trying to get my navigation to resize with the windows width, but as soon as i resize the window the animation elements dont resize with it. I got to scroll to the right in order for me to see the left out elements.

* {
  box-sizing: border-box;
  font-size: 100%;
  font-family: DM Sans;
  margin: 0;
  padding: 0;
}

@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/dm-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: url('fonts/dm-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/dm-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('fonts/dm-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('fonts/dm-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('fonts/dm-sans-v11-latin-regular.svg#DMSans') format('svg'); /* Legacy iOS */
}



@media screen and (min-width: 40em) {
  #container > * {
    margin-bottom: 0;
  }
  #container {
    display: grid; 
        flex-direction: column;
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: 
          "header header header"
          "main main side"
          "footer footer footer";
     height: 100vh;
        }
  #footer, #header {
    grid-column: 1 / -1;
  }
  #inhalt {
    grid-column: 1 / 3;
  }

  #navigation {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}


@media screen and (max-width: 35em) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  
  nav ul {
    flex-direction: column;
  }
  
  nav li {
    margin: 10px 0;
  }
}

@media screen and (max-width: 768px) {
  #navigation {
    justify-content: center;
  }
}

#container {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
width: 100%;
}

#container > *{
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

#inhalt, #sidebar{
  background-color: #e6dddd7a;
  border: 1px solid #0000001e;
}

header {
  display: grid;
  justify-items: center;
}

header li {
  list-style: none;
  display: inline-block;
  padding: 0 20px;
  font-size: 1em;
  padding-left:70px;
  padding-right:70px;
  }
    
  header a {
  text-decoration: none;
  color: #000;
  transition: 400ms;
  justify-content: space-between;
  margin: -15px;
  }
    
  header a:hover {
  text-decoration: none;
  }


nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  font-size: 1.3rem;
}

nav a:hover {
  text-decoration: none;
  background-color: #FF5841;
}

.active {
  background-color: #FF5841;
}

article{
font-size: 1rem;
word-spacing: 8px;
margin-bottom: 3%;
color: #000;
padding-left: 20px;
padding-right: 20px;

}

.article-headline{
  display: flex;
  font-size: 1.2rem;
  justify-content: space-between;
  border-bottom: solid 1px #0000001e;
  padding: 10px;
  margin-bottom: 3%;
}

.article-headline .count{
  margin-left: 70%;
}

#sidebar li, a {
  list-style: none;
  padding: 10px;
  color:#000;
  text-decoration: none;
  transition: 400ms ease;
  display: flex;
  text-align: center;
  justify-content: center;
  }
  
  #sidebar a:hover{
  text-decoration: none;
  background-color: #FF5841;

  }
  
  #sidebar h2{
  text-align: center;
  padding-bottom: 30px;
  }

  #sidebar a{
    width: 100%;
  }
  

footer{
display: flex;
font-size: 1rem;
justify-content: space-between;

}

footer img {
width: 4em;
height: 2em;
margin: 10px;
}

footer a, #hidebar, span {
text-decoration: none;
padding-top: 10px;
color:#000
}

footer #hidebar:hover, a:hover{
text-decoration: underline;
cursor:pointer;
}

button {
  background-color:#FF5841;
  cursor:pointer;
    font-size:1.1rem;
  padding: 5px;
  
}

button:hover{
  background: #de7f71;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" type="image/x-icon" href="images/icon.ico">
</head>
<body>
<div id="container">
    <header id="header">

      <div id="navigation">
        <nav>
          <ul>
            <li><a class="active" href="#">asdasdasdasd</a></li>
            <li><a href="#">asdasdasdasd</a></li>
            <li><a href="#">asdasdasd</a></li>
            <li><a href="#">Wasasdasddao</a></li>
            <li><a href="#">asdasd</a></li>
            <li><a href="#">asdasdasd</a></li>
          </ul>
        </nav>
      </div>
    </header>


  <main id="inhalt">
    <div class="article-headline">
      <h1>Test</h1>
      <h1>22.02.2023</h1>
    </div>

      
      <article id="content">
      <p>test</p>

      <p>test</p>        
      <p>test</p>        
      <p>test</p>    
    </article>
  </main>

  <div id="sidebar">
    <h2>something</h2>
    <ul>
      <li><a class="active" href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
    </ul>
  </div>
      
  <footer id="footer">
    <span id="hidebar" href="#">deactivate sidebar</span>
    <a href="#">test</a>
  </footer>
</div>
</body>
</html>

I’d appreciate any help

I’ve tried using solutions used before like implementing width 100%; for the navbar or header without any luck.

Answers

You have a large amount of padding on your link items:

header li {
  padding-left: 70px;
  padding-right: 70px;
}

If you want your nav to shrink when it doesn’t have enough width for all that padding, use flexbox instead of grid.
You can also simply reduce the padding. I had to strip away a lot of unnecessary code to get to your problem. Next time try and distill it down to a Minimum Reproducible Example

* {
  box-sizing: border-box;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 40em) {
  #container>* {
    margin-bottom: 0;
  }
  #container {
    display: grid;
    flex-direction: column;
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: "header header header" "main main side" "footer footer footer";
    height: 100vh;
  }
  #header {
    grid-column: 1 / -1;
  }
  #navigation {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

@media screen and (max-width: 35em) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  nav ul {
    flex-direction: column;
  }
  nav li {
    margin: 10px 0;
  }
}

@media screen and (max-width: 768px) {
  #navigation {
    justify-content: center;
  }
}

#container {
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  width: 100%;
}

#container>* {
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

header {
  display: grid;
  justify-items: center;
}

header li {
  list-style: none;
  display: inline-block;
  padding: 0 20px;
  font-size: 1em;
}

header a {
  text-decoration: none;
  color: #000;
  transition: 400ms;
  justify-content: space-between;
  margin: -15px;
}

header a:hover {
  text-decoration: none;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  font-size: 1.3rem;
}

nav a:hover {
  text-decoration: none;
  background-color: #FF5841;
}

.active {
  background-color: #FF5841;
}

<div id="container">
  <header id="header">
    <div id="navigation">
      <nav>
        <ul>
          <li><a class="active" href="#">asdasdasdasd</a></li>
          <li><a href="#">asdasdasdasd</a></li>
          <li><a href="#">asdasdasd</a></li>
          <li><a href="#">Wasasdasddao</a></li>
          <li><a href="#">asdasd</a></li>
          <li><a href="#">asdasdasd</a></li>
        </ul>
      </nav>
    </div>
  </header>
</div>

Zach’s answer is very good.

A few more friendly observations, you need to clean your code, you got a lot of inconsistencies. A few examples:

You overwrite your code many times within a single block.
Also you grid setup is inconsistent:

#container {
    display: grid; 
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: 
          "header header header"
          "main main side"
          "footer footer footer";
     height: 100vh;
        }

#container {
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  width: 100%;
}

#container>* {
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

You got display grid with flex-direction

#container {
    display: grid;
    flex-direction: column;
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: "header header header" "main main side" "footer footer footer";
    height: 100vh;
  }

Please signup or login to give your own answer.

Click here to cancel reply.