How do I prevent my layout on breaking on big/very wide screen sizes?
This is the webpage:
https://gymlie.vercel.app/dashboard
The problem
Opening the website on super wide or big monitors can cause the site to act super weird and for the content inside of the elements to jump out of place
I tried setting auto margins on left and right and a max width class
TechStack
Next.js, React, Typescript, Tailwind, Tremor (for the charts)
This is how it looks like on 1920 1080 resolution
https://i.imgur.com/H8AcyrJ.png
This is how it looks like on a 4k monitor (before applying margin auto max width)
https://cdn.discordapp.com/attachments/1015674023411208267/1251474247763628054/image.png?ex=666eb5b7&is=666d6437&hm=d6f8f04970071aeff788481d5aee0e50129f71e1185b50fb97da192814e490a1&
and this is how it looks like when I zoom out the browser (after applying margin auto max width)
https://i.imgur.com/1fDYBvv.png
This is the behavior that I'm trying to achieve:
https://i.imgur.com/EAH8jro.png
This is my repo:
https://github.com/fadelyking/gymlie/tree/main/app
6 Replies
i can't reproduce the bad behaviour: seems perfectly fine to me
even the regular zoom seems fine
yeah I just fixed it after posting this.. @ἔρως
the issue was that I was forcing full height
so everything was stretching
thanks for taking a look though
you're welcome
you can mark this as solved, by the way
how?
if im not mistaken, it's just a tag