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 ="https://i.weltbild.de/p/eichhoernchen-2022-312196353.jpg?v=13&wp=_max" alt = "kanufahrer" titel="Kanufahrer in Bangladesch"> <p> igendein text zum bild </p> </main> <footer > <p>© 2020 Corin Reyelt</p> </footer> </body> <html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!