Jump to content

confused with min/max width


jimfog
 Share

Recommended Posts

Despite i have understood in theory what the min/max width property does, i have difficulty understanding the practical implications in it and how there relate to the size of the browser window.From what i realize it is an important property since it aims to adjust the content of the site in accordance with the resolution of the user's monitor-correct me if i am wrong.Let me mention some conclusions i have reached regarding this property.By setting for example an element with a min-width of 800px even if the content inside it is 400px the element will remain at 800px.I think that i can achieve the same effect by using just width:800px;I did some testing and noticed that there seems not to be any difference between having width:800px; and min-width:800pxAny help will be more than appreciated.

Link to comment
Share on other sites

What if you want your content to expand past 800 pixels? width:800px will limit the width, but min-width will allow the minimum width to be 800 and allows it expand past that.

Link to comment
Share on other sites

If you have a outer container element with a fluid width, for example of 80%, this will stretch to 80% of the current screen width, but! say you have some fixed width child elements, within in it. Now if the outer container width falls below 960px (width usually used for 1024 width resolution screens), the child containers may start to stack above each other as they are too wide to fit side by side, in this situation min-width: 960px; would prevent this from happening.The max-width (which i can't remember ever using), would be used in a similar situation where a extra wide screen would make the design less desirable, so a restriction is set to prevent it going beyond a specific width.

Link to comment
Share on other sites

  • 4 weeks later...
If you have a outer container element with a fluid width, for example of 80%, this will stretch to 80% of the current screen width, but! say you have some fixed width child elements, within in it. Now if the outer container width falls below 960px (width usually used for 1024 width resolution screens), the child containers may start to stack above each other as they are too wide to fit side by side, in this situation min-width: 960px; would prevent this from happening.The max-width (which i can't remember ever using), would be used in a similar situation where a extra wide screen would make the design less desirable, so a restriction is set to prevent it going beyond a specific width.
I think i am close(very) at understanding this notion.On first it seems difficult, but eventually someone can get at the bottom of it.
Link to comment
Share on other sites

If you have a outer container element with a fluid width, for example of 80%, this will stretch to 80% of the current screen width, but! say you have some fixed width child elements, within in it. Now if the outer container width falls below 960px (width usually used for 1024 width resolution screens), the child containers may start to stack above each other as they are too wide to fit side by side, in this situation min-width: 960px; would prevent this from happening.The max-width (which i can't remember ever using), would be used in a similar situation where a extra wide screen would make the design less desirable, so a restriction is set to prevent it going beyond a specific width.
If you make lets say a menu for something mobile like a ipad and a phone, since it's mobile you want to use the hole width of the screen.So you set the menu to use 100% width of the screen, but for readability issues we can't make them smaller then 100px and not greater then 300px so you won't lose focus.so a css for this would look something like this:.PointToEffectedElement{margin: 0 auto;width: 100%;min-width: 100px;max-width: 300px;}So first we have centered the element in case someone has a wider screen.Next we set it to use all screen spaceAfter what we set the minimum width this element can be so if you have a smaller screen you would need to scroll.Ending with the maximum width allowed to use if the screen is wider then the readability width of the element.Hope this helps. Edited by ckrudelux
Link to comment
Share on other sites

If you make lets say a menu for something mobile like a ipad and a phone, since it's mobile you want to use the hole width of the screen.So you set the menu to use 100% width of the screen, but for readability issues we can't make them smaller then 100px and not greater then 300px so you won't lose focus.so a css for this would look something like this:.PointToEffectedElement{margin: 0 auto;width: 100%;min-width: 100px;max-width: 300px;}So first we have centered the element in case someone has a wider screen.Next we set it to use all screen spaceAfter what we set the minimum width this element can be so if you have a smaller screen you would need to scroll.Ending with the maximum width allowed to use if the screen is wider then the readability width of the element.Hope this helps.
Yes it does.Thanks
Link to comment
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

×
×
  • Create New...