diff --git a/src/app/about/about.component.css b/src/app/about/about.component.css index 24b821a..49a3151 100644 --- a/src/app/about/about.component.css +++ b/src/app/about/about.component.css @@ -12,23 +12,21 @@ } } -.about-background { - background-image: url("/assets/usage-statistics-assets/about/1.svg"); - background-repeat: no-repeat; - background-position: 0 -30px; - background-size: contain; - position: relative; -} -@media only screen and (max-width: 959px) { + +@media only screen and (min-width: 1200px) { .about-background { - background-size: cover; + background-image: url("/assets/usage-statistics-assets/about/1.svg"); + background-repeat: no-repeat; + background-position: 0 -30px; + background-size: contain; + position: relative; } } .about-background a.next { position: absolute; - bottom: 10%; + bottom: 10vh; right: 10%; color: var(--portal-main-color); line-height: 24px; @@ -54,29 +52,30 @@ background-repeat: no-repeat; background-position: 0 0; background-size: contain; - height: 45vh; + height: 30vh; } @media only screen and (min-width: 1200px) { + .architecture { - position: relative; + background-size: 80% 70%; + height: 450px; } .architecture > div { - top: -30px; - right: -10vw; - width: 400px; background-image: url("/assets/usage-statistics-assets/about/2.2.svg"); background-repeat: no-repeat; background-position: 0 0; - background-size: contain; - position: absolute; + background-size: auto; + margin-top: -50px; + width: 30%; } } @media only screen and (min-width: 1200px) { .workflows img { margin-left: -10%; + align-self: start; } } diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index 5423cc0..604b93f 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -14,8 +14,9 @@ @@ -32,12 +33,10 @@