diff --git a/src/pages/ValidatorOnboarding/Overview/overviewWrapper.module.css b/src/pages/ValidatorOnboarding/Overview/overviewWrapper.module.css index 139848ad..4a7770fd 100644 --- a/src/pages/ValidatorOnboarding/Overview/overviewWrapper.module.css +++ b/src/pages/ValidatorOnboarding/Overview/overviewWrapper.module.css @@ -7,6 +7,7 @@ overflow: hidden; border-radius: 25px; } + .layout::after { display: block; content: ''; @@ -16,17 +17,20 @@ width: 100%; height: 100%; } + .layout-left { flex: 0 0 55%; max-width: 55%; z-index: 2; } + .container { display: flex; flex-wrap: wrap; height: 100%; padding-left: 1.5rem; } + .container-inner { max-width: 70%; flex: 1 0 70%; @@ -34,11 +38,7 @@ flex-direction: column; padding: 1rem 0; } -.content { - flex-grow: 1; -} -/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ .layout-right { flex: 0 0 45%; max-width: 45%; @@ -51,11 +51,13 @@ overflow: hidden; color: #fff; } + .image-container::before { display: block; content: ''; padding-bottom: 60%; } + .image-container::after { display: block; content: ''; @@ -70,6 +72,7 @@ rgba(255, 255, 255, 0) ); } + .image-container .background-img { position: absolute; top: 45%; @@ -78,15 +81,6 @@ height: 140%; width: auto; } -.image-container .nimbus-logomark { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -.image-container .nimbus-logomark svg { - height: 73px; -} @media (max-width: 1000px) { .layout { @@ -134,23 +128,6 @@ height: auto; } - .image-container .nimbus-logomark { - display: none; - } - - .content, - .breadcrumbBar, - .other-elements { - margin: 0; - padding: 0; - } - - .breadcrumbBar, - .some-other-element { - margin: 0; - padding: 0; - } - .image-container { position: relative; overflow: hidden;