Added extra small screen layout

This commit is contained in:
Jonas_Jones 2023-10-02 19:09:46 +02:00
parent 45e2657cd1
commit 1799f16ac5
4 changed files with 22 additions and 4 deletions

View file

@ -27,7 +27,7 @@
footer {
padding: 1rem;
margin: 2rem;
margin-bottom: 0;
margin-bottom: 2rem;
margin-top: 0;
background: var(--container-background-color);
display: flex;
@ -54,4 +54,11 @@
align-items: center;
font-size: 20px;
}
@media (max-width: 550px) {
footer {
margin: 0;
border-radius: 0;
}
}
</style>

View file

@ -19,7 +19,7 @@
header {
padding: 1rem;
margin: 2rem;
margin-top: 0;
margin-top: 2rem;
margin-bottom: 0;
background: rgb(0, 255, 0);
display: flex;
@ -67,5 +67,10 @@
header h1 {
font-size: 20px;
}
header {
margin: 0;
border-radius: 0;
}
}
</style>

View file

@ -142,3 +142,11 @@ details a {
margin-top: 0;
}
}
@media screen and (max-width: 550px) {
.column {
margin: 0;
margin-bottom: 1rem;
border-radius: 0;
}
}

View file

@ -5,7 +5,6 @@
</script>
<div style="height:2rem" />
<Header />
<div class="container">
<div class="column"><Navbar /></div>
@ -17,4 +16,3 @@
</div>
<Footer />
<div style="height:2rem" />