I have tried to set a minimum width on how narrow the browser can get when it loads my site.
But I don’t think it worked.
How do you do that?
By simply adding:
body{
min-width: 450px;
width: 100%;
}
?? I don’t think it worked on my project.
Another thing is this, every browser has their own minimum width they can set.
Here’s a screenshot:
You can see that the firefox family has their own minimum width, and and all the other 3 browsers has 3 different minimum width.
How do I set it so that no matter what my site is being loaded on, it will have a static minimum width?
(I am not using bootstrap as well as any CSS framework)
I am confused.
I don’t think min-width has anything to do with minimum browser width. Rather, it specifies the size below which your element can not shrink. If you put min-width: 450px on your body element and resize your browser window to anything below 450px, you will see a horizontal scroll bar because your element will refuse to shrink further.
2 Likes
Then I can set min-width to whatever I want??
Is there a guideline about which value I should set it to?
I think so, yeah. You may want to set it to a size below which your design starts to break (e.g. content gets squished, you start seeing overflowing text etc) to prevent that from happening. Of course then users on small devices will have to scroll to see all of your content. It’s probably best to make your content as elastic as possible (by avoiding fixed widths and heights and using relative units instead like %, vw, vh, vmin). And, if that’s not enough to fit all desired devices, you can use media queries to adjust your design for different device width.
1 Like
