I'm working on a responsive dashboard. I thought everything was going well, but then I tested it on a large screen and it doesn't look too well anymore. Obviously people with big screens don't want to see everything in a humongous font size.
Some resources or thoughts how I should let my design scale different sizes? I mean desktop screens, not mobile and tablets, I have that covered fairly so far.
Well, That good. I am not so professional with css, but i can do some amazing things with it. I am also trying to develop my own CSS framework to ease my work tension, as the specification of my clients are almost getting the same. I am also looking for developers to work with so we can have a unified view of the project as it is going to be open source
Like @mgiambanco said, set a max-width. Also on choosing breakpoints, I really love the Mobile-first pattern. Make a website look good on mobile, then change for tablet and finally desktops. That's what I usually do, and it prevents me from writing too many media queries.
Well, most people would direct you to media queries. I highly recommend you take a browser, build for the biggest screen and then start decreasing the viewport size to a point where you think your app starts looking ugly. That's your first breakpoint. Then you write a media query starting from that breakpoint so your site looks good again. Then you shrink the viewport again and repeat the previous steps. Do that until you reach the smallest size you want to support (for example medium sized mobile phone; or maybe small laptop screens as you claim to have covered mobile and tablets already). You can read about that technique in detail on smashing mag's blog: smashingmagazine.com/2012/03/device-agnostic-appr…
Media Queries are the solutions to your problems. Mark down your breakdown points and write the media queries accordingly. Also using the right CSS framework would do the most of the job need by the media queries. still there are some parts which really need to be customized.
Set a max-width on the outer most container, center it and don't let things get bigger then that? 1280px wide should be a good stopping point - older laptops and desktops that stop at 1280px wide will be fine; newer machines that have wide screen displays / 4k displays will just center and show the body bg color around it.
Emil Moe
Senior Data Engineer
I chose this solution
max-width: 1280px; width: 100%;Thanks !