diff --git a/code/frontend/src/pages/about.css b/code/frontend/src/pages/about.css index 0f5f9dc..6384f90 100644 --- a/code/frontend/src/pages/about.css +++ b/code/frontend/src/pages/about.css @@ -1,11 +1,9 @@ .mainbox { - min-width: 360px; max-width: 100vw; } @media screen and (min-width: 768px) { .mainbox { - min-width: 60rem; min-height: 60rem; margin-top: var(--Header-height); } @@ -34,7 +32,7 @@ } .explain-title { margin: 1vw; - width: 90vw; + min-width: 90vw; font-size: clamp(5rem, 10vw, 17vw); color: var(--Rotkehlchen-orange-default); } @@ -59,9 +57,10 @@ .intro { box-sizing: border-box; margin: 3vw; + max-width: 94vw; } .block-l { - height: clamp(19rem, 55vh, 100%); + height: clamp(24rem, 60vh, 100%) !important; } .block { @@ -70,7 +69,7 @@ grid-template-rows: 1fr auto; align-items: center; justify-content: space-between; - height: clamp(22rem, 45vh, 100%); + height: clamp(2rem, 45vh, 100%); margin: var(--margin-mobile); vertical-align: center; margin-block-end: var(--margin-mobile); @@ -95,12 +94,12 @@ .item { max-width: 90vw; - max-height: 19rem; } .pic { - max-width: 80vw; + max-width: calc(80vw - var(--margin-mobile)) !important; border-radius: var(--border-radius); box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25); + max-height: 19rem; } .text1 { @@ -110,9 +109,11 @@ } .text-start { text-align: start; + margin-right: 2vw; } .text-end { text-align: end; + margin-left: 2vw; } @media screen and (min-width: 768px) { @@ -121,6 +122,12 @@ width: auto; justify-self: center; } + .explain-title { + margin: 1vw; + min-width: 90vw; + font-size: clamp(7rem, 10vw, 17vw); + color: var(--Rotkehlchen-orange-default); + } .about-title { flex-direction: row; justify-content: start; @@ -136,7 +143,6 @@ grid-template-columns: 1fr auto; align-items: center; justify-content: space-between; - height: clamp(30vw, 45vh, 100%); margin: 1rem; vertical-align: center; margin-block-end: 2rem; @@ -148,14 +154,14 @@ } .item { - height: clamp(19rem, 30vw, 30vw); + height: clamp(1rem, 30vw, 30vw); max-height: none; } .text1 { height: 100%; color: white; - font-size: clamp(5rem, 8vw, 15vw); + font-size: clamp(1rem, 8vw, 15vw); display: flex; align-items: center; }