Min-width and how it works on different browsers

[mrchow19910319]

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.

[mariushm]

Set margins and borders to 0

Consider also adding text-overflow property to clip and hide text if width is too small : https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

 

[Mira Yurizaki]

The min-width property does not force the browser window to conform to it. It just means the minimum size an element within the page can be. I can see horizontal scroll bars on the Firefox Dev and Chrome windows, indicating it's working as intended.

 

If that's not what you're thinking though, I'm having a hard time seeing that browsers supposedly implement the min-width property differently when none of the browser windows are lined up. If you want to show that browsers do implement it differently somehow, then you have to line them up, align them, and stretch out the window of each one until the horizontal scroll bar no longer shows.