diff --git a/src/components/Password-Generator/PasswordGeneratorComponent.sass b/src/components/Password-Generator/PasswordGeneratorComponent.sass index 2b1d895..63dcc83 100644 --- a/src/components/Password-Generator/PasswordGeneratorComponent.sass +++ b/src/components/Password-Generator/PasswordGeneratorComponent.sass @@ -43,10 +43,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993) flex-direction: column .slider--group - // grid-area: slider--group padding: 0 0 0 1rem flex-grow: 0 + @media screen and (max-width: view.$tablet) + padding: 0 2rem 0 2rem + justify-content: center + align-items: center + .display--group padding: 3rem 1rem 1rem 1rem @@ -104,7 +108,7 @@ $toggleOnColor: rgba(53, 155, 80, 0.993) letter-spacing: 1px font-size: 1rem font-weight: 500 - // font-family: 'Inter' + font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily .button--group display: flex @@ -163,6 +167,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993) outline: none box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%) + @media screen and (max-width: view.$tablet) + display: flex + flex-direction: column + align-items: center + justify-content: center + text-align: center + width: 100vw + .alert border-radius: 6px padding: 1rem 1.25rem