Is `min-width` necessary or best practice for containers?
Hi community,
I have this situation where I have a page that has a single card with content inside.
As I learned in CRL course, I set its width with
width: min(90%, 24rem);, which in all honesty I like how it works.
However, someone elsewhere recommended me to set a min-width because as they showed me using responsive mode of the browser in like less than 200px viewport width is too squishy and gets all broken (which yeah it's true of course).
My thinking though is that there are no screens of that side.
I assume what they have in mind is at that point with min-width making the card overflow, so they either scroll inline or just plainly use landscape mode.
For me, though, there is no point on spending time on preparing for situations that don't exist... there are no screens of like 200 px wide, I think (and if there are, how do you even read?).
But what they argued to this is that if you kind of scale the screen (I suppose with zoom out or something like that) then in that case it would matter.
I was left a little puzzled.
In your experience, is that right to think about those extra tiny sizes?
If so, do you set min-width like that to everything?
And if so, is that kind of compatible with the min(%,rem) we learned in the course?
Thanks in advance for your insight!2 Replies
-# highly opinionated, I am a junior front-andy
imo; There is no generally valid answer to this, accompanied with an « it depends ».
short; I do not use that property by default. We can not fully workaround all of the designers or content creators grievances nor users quirks simultaneously.
I would be eager to see a project of the person you have argued with, where they successfuly preserved design-ideas mainly by setting
min-width.
Adding a min-width, if anything, would do more for the designers peace of mind rather than for the users accessibility.
When the layout and/or contents are not designed to work at small sizes, the forced scrollbar will not fix that any better than what the browser automatically does with overflow in the first place. It can be important to keep the content or call-to-actions intact (like words or buttons) at all costs – but bruteforcing a specific layout across viewports not realistic.
There can be cases where an inner scrollbar makes sense when there is hardly any better alternative to display that content – like a shopping-cart list for checkouts. But then again that is to preserve the content's readability. A card usually is a mere design choice and does not need to stay that way.
It is fair to say↦ test at reasonable sizes or zoomed, especially when it's relevant for the main audience. Anything else is bluntly said pedantic.
Beyond that, 200px or extreme-zoom are an arbitrary and niche measurement or situation. If one wants to back up some kind of reasoning for this, at least they should use common and real life viewports resulting from statistics. E.g. 320 or 375px for handheld devices (Dec 2024).Big, big thanks @Simon for taking the time to respond. I thought similarly, but really wanted to get a more experienced point of view.
Adding a min-width, if anything, would do more for the designers peace of mind rather than for the users accessibility.
This. :this: