Website an Bildschirmgröße anpassen
Ich habe das Problem, dass sich meine Website nicht an die Bildschirm Größe anpasst. Ich habe verschiedene Sachen ausprobiert. (z.B. Container).
Der hier verwendete Code
<!doctype html>
<html lang = "de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Corin Fotografie Natur Personen">
<title> Corins Blog</title>
<style>
*{
margin:0;
padding:0;
}
body {
font-size: 150%;
font-family: Arial, Helvetica, sans-serif;
background-color: #bbbbbb;
color: rgba(14, 13, 13, 0.521);
display:flex;
width:100%;
flex-direction:column;
}
h1 {
font-size: 200%;
text-align: center;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
background-color: #bbbbbb;
color: white;
}
nav {
background-color: rgb(17, 17, 17);
width:100%;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li{
flex:1;
}
nav a {
text-decoration: none;
color: rgb(250, 244, 244);
display: block;
padding: 0.7rem;
font-size:2vw;
color: white;
text-align: center;
}
nav a.aktuell {
font-weight: bold;
}
main{
display:flex;
flex-direction:column;
}
footer {
background-color: rgb(17, 17, 17);
color: rgb(241, 235, 235);
}
img{
width: 90%;
align-self:center;
}
p{
text-align:center;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="C:\Users\Tahne\Desktop\Websites\Corins Blog\Home.html" >HOME</a></li>
<li><a href="C:\Users\Tahne\Desktop\Websites\Corins Blog\Portfolio.html" >PORTFOLIO</a></li>
<li><a href="C:\Users\Tahne\Desktop\Websites\Corins Blog\Preise.html" >PREISE</a></li>
<li><a href="C:\Users\Tahne\Desktop\Websites\Corins Blog\Ueber mich.html" >ÜBER MICH</a></li>
<li><a href= "Kontakt.html" >KONTAKT</a></li>
<li><a href= "Impressum.html" >IMPRESSUM</a></li>
</ul>
</nav>
</header>
<main>
<img src ="/image/eichhoernchen-2022-312196353.webp" alt = "kanufahrer" titel="Kanufahrer in Bangladesch">
<p>
igendein text zum bild
</p>
</main>
<footer >
<p>© 2020 Corin Reyelt</p>
</footer>
</body>
<html>