How to make 1920px container design look good on smaller desktop screens?
I've the design of a dashboard which has a 1920px container size. How do I approach it so the application maintains its appearance on smaller desktop screens as well? Because if i use the same font sizes, spacing etc as provided in the design, the content just won't fit on smaller desktop screens. How to achieve this kinda "adaptiveness"? Would appreciate the help.
21 Replies
that's called "responsive design" and there's no one solution
generally, you let elements shrink while maintaining font sizes, reorder elements as horizontal space gets less available, or switch to a single column layout once you get to really small sizes like tablets or phones
Kevin has a good (free) course that teaches you the basics of making responsive designs: https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
this is also generally something you'd do while coordinating with the designer btw. A proper design for a website will include a desktop size (which is usually smaller than 1920px wide to begin with, a lot of laptops have smaller screens than that) and a phone size, with maybe a tablet size in between
Using clamp() for font-size and then using margin and padding and gap with EMs is a good start. Making sure to not set any absolute widths (eg in px) or heights. There is always media queries too but learning how to code it up responsively from the start to reduce yourself to maybe one media query I'd important. I get sad when I have to use media queries these days. Also using grid and flex is great help. But by default the elements are responsive. It's what we to them with css which makes them non-fluid.
while I agree that it's a good practice to design responsive from the start 110%, I do want to emphasize that having to use media queries isn't a failure and they're not bad. It's fine to try to do things with flexible grid layouts and flexbox, and you can get a lot accomplished that way, but it's fine to use mediaqueries too (you can do really cool stuff with media queries and grid, like easily reorder items when that makes more sense in a different layout for a different width)
thank you, both of you. For this problem, the desired result is to make the application respond to the viewport at all times. No "jumps" on certain breakpoints, only want it for mobile view. Looking at all the content, I feel like I may need to change the layout a bit with media query for smaller desktop. But ideally I'd want it to just adjust while maintaining the layout.
sometimes, the easiest and cleanest solution is a media query
i see people doing ungodly things with grid and flex sizes ...
do you have a very good reason for that? Because in general, no one ever resizes their viewport
instead of trying to make it good on mobile, you could make it work on mobile first, then make it better for desktop
making stuff work well for mobile, more often than not, is to do ... nothing
just let it stack
this is a different approach, and it might surprise you how well it works
but there isnt a silver bullet that fixes everything
its a dashboard, they've explicitly told me that they want it to look the same on all desktop devices. The design is packed with content, thats why I'm a bit reluctant to use media queries.
Lauris Beinerts
YouTube
The Expert (Short Comedy Sketch)
Subscribe for more short comedy sketches & films: http://bit.ly/laurisb Buy Expert shirts & hoodies at https://laurisb.myshopify.com/ Funny business meeting illustrating how hard it is for an engineer to fit into the corporate world! Watch the next episodes: http://bit.ly/SquareProjectEp1, http://bit.ly/SquareProjectEp2 & http://bit.ly/SquarePro...
part of your job as a programmer is to tell people "this is impractical / impossible"
fair enough. Let me try again. "I consulted an expert", hopefully it'll help. I'll also ask them to get me a design for smaller desktop screens. 🫠
the focus is completely on the desktop, they don't even have a mobile design at the moment.
the mobile design of a dashboard is just the "do nothing and stack"
usually
not all applications require a mobile view though, if it's not part of the design specs
but yeah, mobile dashboard is just sensibly stacked elements of the dashboard version
which, usually requires that you dont even layout anything, if the markdown is sensibly organized
markup*
yup, markup
i was thinking up, wrote down
It’s just a personal standard to not use media queries for sizing and layout shifts, I don’t see it as a failure for anyone else either btw. It’s just a goal I implemented when I was learning responsive layouts
i personally prefer media queries, as they give me an extra layer of control
I also don't use clamp fonts unless it's for a large text heading
Media query with specific size or no change works most the time
#depends 😅