refining responsiveness of the component

This commit is contained in:
Antoine M 2024-05-16 17:08:23 +02:00
parent 96d6ec0181
commit 25b9e97fee

View File

@ -11,26 +11,29 @@
} }
.screen { .screen {
@apply xl:flex flex-col justify-center items-center relative bg-lhoist xl:h-screen; @apply flex flex-col justify-center items-center relative bg-lhoist xl:h-screen;
// height: 100vh; // height: 100vh;
// @apply overflow-x-hidden overflow-y-auto; // @apply overflow-x-hidden overflow-y-auto;
overflow: hidden; overflow: hidden;
@apply pb-44 xl:pb-0 xl:pt-0; @apply pb-44 2xl:pb-0 xl:pt-0;
min-height: calc(100dvh);
box-sizing: border-box;
@screen md { @screen md {
height: calc(99.8dvh - $margin * 2); min-height: calc(99.8dvh - $margin * 2);
height: auto;
width: calc(100% - $margin * 2); width: calc(100% - $margin * 2);
margin: $margin auto 0 auto; margin: $margin auto $margin auto;
} }
&__content { &__content {
@apply text-center pb-8 mt-28 md:mt-0 md:pb-0 pt-12 md:pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative; @apply text-center pb-8 mt-28 lg:my-12 md:pb-0 pt-12 md:pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative;
background-image: url("../../../img/shapes-background/mask.svg"); background-image: url("../../../img/shapes-background/mask.svg");
background-size: auto 100%; background-size: auto 100%;
background-position: 90% top; background-position: 90% top;
@screen md { @screen md {
background-position: center; background-position: center;
background-size: 100% 100%;
} }
background-repeat: no-repeat; background-repeat: no-repeat;
box-sizing: border-box; box-sizing: border-box;