diff --git a/src/assets/css/components/game/Score.scss b/src/assets/css/components/game/Score.scss index 27661c5..ecf6390 100644 --- a/src/assets/css/components/game/Score.scss +++ b/src/assets/css/components/game/Score.scss @@ -2,9 +2,9 @@ @apply absolute bottom-4 left-4 z-10; .answers-visualiser { - @apply flex flex-col md:flex-row gap-4 p-0 m-0; + @apply flex flex-col md:flex-row gap-y-3 gap-x-4 p-0 m-0; .answer { - @apply bg-white shrink-0 h-12 md:h-16 list-none relative flex items-center justify-center; + @apply bg-white shrink-0 h-10 md:h-16 list-none relative flex items-center justify-center; aspect-ratio: 1; width: auto; z-index: -2; diff --git a/src/assets/css/components/layout/Logo.scss b/src/assets/css/components/layout/Logo.scss index 8e78be7..902306f 100644 --- a/src/assets/css/components/layout/Logo.scss +++ b/src/assets/css/components/layout/Logo.scss @@ -6,7 +6,7 @@ isolation: isolate; img { - @apply w-24 h-auto py-6 px-12 z-10; + @apply w-16 md:w-24 h-auto py-2 md:py-6 px-2 md:px-12 z-10; } &:after { @apply absolute block top-0 left-0 w-full h-full bg-white; diff --git a/src/assets/css/components/layout/Page-container.scss b/src/assets/css/components/layout/Page-container.scss index 9b474d5..b996f93 100644 --- a/src/assets/css/components/layout/Page-container.scss +++ b/src/assets/css/components/layout/Page-container.scss @@ -12,15 +12,21 @@ .screen { @apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist; - height: calc(99.8dvh - $margin * 2); - width: calc(100% - $margin * 2); - margin: $margin auto 0 auto; + height: 100vh; + + @screen md { + height: calc(99.8dvh - $margin * 2); + width: calc(100% - $margin * 2); + margin: $margin auto 0 auto; + } &__content { - @apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative; + @apply text-center 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-position: center; background-size: cover; + box-sizing: border-box; + max-width: 90%; // padding-bottom: -100px; } } diff --git a/src/assets/css/pages/Rating.scss b/src/assets/css/pages/Rating.scss index 7d12f99..7e04e59 100644 --- a/src/assets/css/pages/Rating.scss +++ b/src/assets/css/pages/Rating.scss @@ -86,8 +86,11 @@ } textarea { - @apply bg-slate-200 border-none min-w-96 p-4 text-lg my-4; - min-width: 600px; + @apply bg-slate-200 border-none p-4 text-lg my-4; + width: 80%; + @screen md { + min-width: 600px; + } } .cta--back { @apply mt-3 mx-auto;