Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Min-width and how it works on different browsers

mrchow19910319
 Share

Go to solution Solved by 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.

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:

 

1751685886_ScreenShot2019-01-04at12_43_54AM.png.fc2366c95ccb4f80e96776c5862eaba2.png

 

 

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.

If it is not broken, let's fix till it is. 

Link to comment
Share on other sites

Link to post
Share on other sites

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.

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×