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.
2
Answers
You have a large amount of padding on your link items:
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
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:
You got display grid with flex-direction