diff --git a/assets/sass/adhesion.scss b/assets/sass/adhesion.scss index 746a52d..ef91329 100644 --- a/assets/sass/adhesion.scss +++ b/assets/sass/adhesion.scss @@ -1,18 +1,27 @@ .adhesion-body { overflow: hidden !important; + height: 100%; } .root { - min-height: 100%; + overflow: hidden; + height: 100%; + + + display: flex; + flex-direction: column; + + } .adhesion-container { background-color: black; - height: 100%; width: 100%; - min-height: 100%; - height: 90vh; + flex-grow: 1; + // height: 100%; + // min-height: 100%; + // height: 90vh; .video-presentation { height: 100%; @@ -29,11 +38,11 @@ } .adhesion-footer { - background-color: $background; width: 100%; - height: 10vh; + height: auto; padding: 1rem 0; + background-color: $background; display: flex; justify-content: center; align-items: center; @@ -85,6 +94,10 @@ width: 3rem; height: 3rem; margin-right: 1rem; + + &:last-of-type { + margin-right: 0; + } a { display: block; width: 100%; @@ -103,21 +116,24 @@ } } -@media (max-width: $md-breakpoint) { - .adhesion-container { - height: 85vh; - } - .adhesion-footer { - height: 15vh; - } -} +// @media (min-height: 800px) and (max-height: 900px) { +// .body { +// display: none; +// } +// .adhesion-container { +// height: 76vh !important; +// } +// .adhesion-footer { +// height: 100% !important; +// } +// } + +@media (max-width: $mobile-breakpoint) { + .adhesion-footer { + height: auto; + } -@media (max-width: $xs-breakpoint) { - .adhesion-container { - height: 80vh; - } .adhesion-footer { - height: 20vh; .subscribe-button { margin-bottom: 1rem; } @@ -129,3 +145,9 @@ } } } + +// @media (max-width: $xs-breakpoint) { +// .adhesion-container { +// height: 80vh; +// } +// } diff --git a/assets/sass/main.scss b/assets/sass/main.scss index e5f1c09..6b0f442 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -2,6 +2,7 @@ $xl-breakpoint: 1800px; $lg-breakpoint: 1600px; $md-breakpoint: 1100px; $sm-breakpoint: 900px; +$mobile-breakpoint: 450px; $xs-breakpoint: 400px;