Ich habe eine Frage. Ich arbeite gerade als Anfänger an einer Website und habe folgendes Problem.
So sieht die Website eigentlich aus :
So sieht sie aus nach der ersten Skalierung mit responsive Webdesign (wo nach alles richtig ist.):
Doch wenn ich ein weiteres mal skalieren möchte passiert folgender Fehler (Es soll so wie auf dem zweiten Bild aussehen nur kleiner):
HTML: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>ToDo List</title>
</head>
<body>
<header class="site-header">
<form action="action_page.php" method="post">
<input type="text" id="todo-box" name="box-input" placeholder="Aufgabe eingeben" required maxlength="50" class="todo-input">
<input type="reset" class="todo-reset todo-reset-submit">
<input type="submit" class="todo-submit" class="todo-reset-submit">
</form>
</header>
<nav class="site-nav">
</nav>
<main class="site-main">
<h2>ToDo</h2>
<p class="todo-point">Müll rausbringen</p>
<p class="todo-point">Zimmer aufräumen</p>
<p class="todo-point">12345678901234567890123456789012345678901234567890</p>
</main>
<footer class="site-footer">
</footer>
</body>
</html>
CSS: .site-header
{
display: flex;
justify-content: center;
margin-bottom: 40px;
margin-top: 20px;
}
.todo-input
{
font-size: 20px;
width: 180px;
padding-left: 5px;
}
.todo-input::placeholder
{
color: black;
}
.todo-reset, .todo-submit
{
width: 150px;
font-size: 20px;
border: none;
cursor: pointer;
}
.todo-input, .todo-reset, .todo-submit
{
border-radius: 5px;
background-color: rgb(251, 255, 0);
border: none;
height: 45px;
transition: background-color 0.3s;
}
.todo-input:hover, .todo-reset:hover, .todo-submit:hover
{
background-color: rgb(213, 216, 13);
}
.site-main
{
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
}
.site-footer
{
margin-top: 60px;
display: flex;
justify-content: center;
}
p.todo-point
{
margin: 3px 0;
padding: 2px;
border: 1mm solid black;
border-radius: 10px;
}
@media (max-width: 520px)
{
.todo-input
{
width: 480px;
margin: 0 5px 5px 5px;
}
.todo-reset, .todo-submit
{
width: 240px;
margin: 0 0 4px 4px;
}
p.todo-point
{
font-size: 19px;
}
}
@media (max-width: 500px)
{
.site-header
{
justify-self: unset;
}
.todo-input
{
display: flex;
justify-content: center;
width: 400px;
margin: 0 5px 5px 5px;
}
.todo-reset-sumbit
{
display: flex;
justify-content: center;
width: 200px;
margin: 0 0 4px 4px;
}
}
