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.

Jochem•4/4/24, 8:32 AM

that's called "responsive design" and there's no one solution

Jochem•4/4/24, 8:33 AM

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

Jochem•4/4/24, 8:33 AM

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!

Jochem•4/4/24, 8:37 AM

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

curiousmissfox•4/4/24, 8:40 AM

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.

Jochem•4/4/24, 8:43 AM

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)

feanorOP•4/4/24, 8:51 AM

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.

Ἔ

ἔρως•4/4/24, 8:51 AM

sometimes, the easiest and cleanest solution is a media query

Ἔ

ἔρως•4/4/24, 8:52 AM

i see people doing ungodly things with grid and flex sizes ...

Ffeanor thank you, both of you. For this problem, the desired result is to make the appl...

Jochem•4/4/24, 8:52 AM

do you have a very good reason for that? Because in general, no one ever resizes their viewport

Ffeanor thank you, both of you. For this problem, the desired result is to make the appl...

Ἔ

ἔρως•4/4/24, 8:53 AM

instead of trying to make it good on mobile, you could make it work on mobile first, then make it better for desktop

Ἔ

ἔρως•4/4/24, 8:53 AM

making stuff work well for mobile, more often than not, is to do ... nothing

Ἔ

ἔρως•4/4/24, 8:54 AM

just let it stack

Ἔ

ἔρως•4/4/24, 8:54 AM

this is a different approach, and it might surprise you how well it works

Ἔ

ἔρως•4/4/24, 8:54 AM

but there isnt a silver bullet that fixes everything

JJochem do you have a very good reason for that? Because in general, no one ever resizes...

feanorOP•4/4/24, 8:57 AM

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.

Jochem•4/4/24, 8:57 AM

https://www.youtube.com/watch?v=BKorP55Aqvg

YouTubeLauris Beinerts

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...

Jochem•4/4/24, 8:58 AM

part of your job as a programmer is to tell people "this is impractical / impossible"

JJochem part of your job as a programmer is to tell people "this is impractical / imposs...

feanorOP•4/4/24, 9:01 AM

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.

Ἔἔρως instead of trying to make it good on mobile, you could make it work on mobile fi...

feanorOP•4/4/24, 9:03 AM

the focus is completely on the desktop, they don't even have a mobile design at the moment.

Ἔ

ἔρως•4/4/24, 9:21 AM

the mobile design of a dashboard is just the "do nothing and stack"

Ἔ

ἔρως•4/4/24, 9:21 AM

usually

Jochem•4/4/24, 9:21 AM

not all applications require a mobile view though, if it's not part of the design specs

Jochem•4/4/24, 9:21 AM

but yeah, mobile dashboard is just sensibly stacked elements of the dashboard version

Ἔ

ἔρως•4/4/24, 9:22 AM

which, usually requires that you dont even layout anything, if the markdown is sensibly organized

Jochem•4/4/24, 9:23 AM

markup*

Ἔ

ἔρως•4/4/24, 9:24 AM

yup, markup

Ἔ

ἔρως•4/4/24, 9:24 AM

i was thinking up, wrote down

curiousmissfox•4/4/24, 9:05 PM

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

Ἔ

ἔρως•4/4/24, 9:23 PM

i personally prefer media queries, as they give me an extra layer of control

b1mind•4/4/24, 9:35 PM

I also don't use clamp fonts unless it's for a large text heading

b1mind•4/4/24, 9:36 PM

Media query with specific size or no change works most the time

b1mind•4/4/24, 9:37 PM

#depends