fix: style components to add responsivity

This commit is contained in:
Christel Westerberg
2024-02-13 13:28:30 +01:00
parent c578432a66
commit 5689e68610
21 changed files with 206 additions and 124 deletions

View File

@@ -1,10 +1,10 @@
.container {
display: grid;
gap: 60px;
grid-template-columns: 2fr 1fr;
margin: 0 auto;
max-width: 1200px;
padding: 30px 0px 45px;
padding: 20px 10px 5px;
background: #fff;
}
.preamble {
@@ -13,13 +13,22 @@
font-size: 1.25rem;
font-weight: 300;
line-height: normal;
margin-bottom: 0px;
margin-bottom: 20px;
text-transform: none;
}
@media (min-width: 740px){
.container {
background: transparent;
padding: 20px 30px 15px;
grid-template-columns: 2fr 1fr;
}
}
@media screen and (min-width: 950px) {
.preamble {
font-size: 1.5rem;
line-height: 2.25rem;
}
}
}