fix: Responsive Design for wide viewing

This commit is contained in:
falendikategar 2024-09-06 09:27:51 +07:00
parent c828812cf3
commit 26e64449f9
2 changed files with 10 additions and 11 deletions

View File

@ -111,9 +111,9 @@ export default function LoginPage() {
</div> </div>
</div> </div>
</div> </div>
<div className="w-screen h-screen flex ml-0 lg:ml-28 justify-center lg:justify-start items-center"> <div className="w-screen h-screen flex ml-0 lg:ml-28 3xl:ml-96 4xl:ml-[48rem] justify-center lg:justify-start items-center">
<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-auto h-auto bg-transparent border-none shadow-none"> <Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-auto h-auto bg-transparent border-none shadow-none">
<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tight">Sign In</h1> <h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tighter">Sign In</h1>
<p className="text-sm mb-10 leading-4 text-muted-foreground"> <p className="text-sm mb-10 leading-4 text-muted-foreground">
New to this app?{' '} New to this app?{' '}
<a <a

View File

@ -72,15 +72,14 @@ module.exports = {
"accordion-up": "accordion-up 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out",
}, },
}, },
letterSpacing: { screens: {
tightest: '-.075em', 'sm': '640px',
tighter: '-.05em', 'md': '768px',
tight: '-.025em', 'lg': '1024px',
normal: '0', 'xl': '1280px',
wide: '.025em', '2xl': '1536px',
wider: '.05em', '3xl': '2048px',
widest: '.1em', '4xl': '3060px',
widest: '.25em',
}, },
}, },
plugins: [require("tailwindcss-animate")], plugins: [require("tailwindcss-animate")],