In this following code i can't understand the function of max-width?and my instructor have written:"It sets max-width:1170px, because when you add the left and right padding with the max-width, you get 1200px which is our large device breakpoint." I hope u can reply on me.Thanks in advance
The max-width property defines the maximum width of an element. This means that if the width is calculated dynamically, it will never exceed the max-width value, but it could be any value smaller.
In your instructors example, the max-width + the side padding will add up to the screen width. This ensures the maximum width of the element never exceeds the width of the screen.
Hope that helps.
max-width
The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration
Using max-width instead of width in this situation will improve the browser's handling of small windows.
This is important when making a site usable on mobile.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
Related
If I want to change the shape of a website page with a width and height of 600px and change its shape. Which one should I use?
Max width/height
Or
Min width/height.
🤔
I hope you can help me in this matter that I asked about media query in css
A maximum width can be specified for elements using the max-width property.
When we don't want the width of an element to exceed a certain value, we can use this feature to determine that value for the element.
By using the min-width and max-width properties, you can set a range for the width of an element.
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small windows.
Why should you not use max-height to restrict the size of an image?
Both max-width and max-height can be used to restrict the size of en element.
This WC article suggests using max-width to fit the image in its container.
https://www.w3.org/WAI/WCAG21/Techniques/css/C37
Is there any reason not to use max-height to restrict size of an image should you have a web applicatin with vertical content flow?
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
max-height vs. max-width : the case for setting max-width
Setting both max-height and max-width can change the aspect ratio of the image, which is often not desired
Setting max-width can be used to ensure that the image "fit" horizontally. In most cases this is preferable, as people are used to scrolling web pages vertically, but not so much horizontally.
With that being said, it is up to you to determine which to use based on your requirements
Yes. Some pages have content placed horizontally :)
When I give max-width of 1440px to a Header, and my whole screen is smaller than 1440px, in the browser this Header takes a width of 920px instead of 1440px.
Why does it do that ?
max-width is just the maximal width an element can have - there is no limit on how small it can be. For that you use min-width.
Try setting width as well as max-width to 1440px. If that doesn't work, add min-width too.
You say your whole screen in smaller than 1440px, it would be logical for the header to take a smaller width, since a width of 1440px is not possible..
Otherwise I don't understand your question very well.. Maybe take a look at padding and margins. Or share your code for a better answer.
It's easy enough to set an element's height depending on its width using tricks such as setting margin-top: AR%, with AR being the aspect ratio of the element.
However, I'd like to do something the other way around.
Namely, I'd like to set the element's min-width to be equal to the element's height, which may be dynamic based on content.
If this isn't possible, that's okay - it's only needed for user-generated content, since the cases where I use it have a static and known height! It's fairly minor, but if it can be done then that'd be great.
Anyone got any ideas?
What exactly are the min and max prefixes in CSS? And are there any docs that explain them in detail?
If you're talking about min-width and max-width (-height), they are not "prefixed". There are simply rules that are called min-width and max-width and also a rule that's called width. These are completely different rules that do different (albeit similar) things.
Perhaps see http://www.quirksmode.org/css/width.html and https://developer.mozilla.org/en/CSS_Reference.
For min-width, max-width, min-height and max-height, you can find details in the CSS 2.1 specification at http://www.w3.org/TR/CSS21/visudet.html#min-max-widths (description for height is a bit further down).
You might be interested by the algorithm description ("The following algorithm describes how the two properties influence the used value of the 'width' property:"). Basically, what seems to be going on is that a tentative width is computed ignoring the min-width and max-width properties. If it is larger than max-width, computation takes place again as if a width value of max-width had been specified. If the result is smaller than min-width, same thing with a width value equal to that of min-wdith.