Natural Responsiveness: <Suggestion on removing the link to Kevin Powell course>
BodiAli opened this issue · comments
I took the course and the problem with it is that it provides incorrect information, for example Kevin Powell says along the lines of: "By default the width of the element is 100%" which is completely wrong and can make the content overflow, the width of an element by default is auto this also is mentioned in this resource inside the assignment section: https://codyloyd.com/2021/percentages/
I know this resource is inside the additional resources but for some people who may take it it's a resource given by TOP which should have valid information and two resources can't be contradictory
@TheOdinProject/html-css thoughts?
I'm sure you didn't understand the lesson Percentages vs Fixed widths well enough, If you re-watched the lesson you'll realize that the lines you're quoting is unfinished. It says "the default with block-level elements such as div, headings, paragraphs is they have a width of a 100%", and yes it's true that the initial value of the width property for all DOM elements is auto, but what is auto? "auto : The browser will calculate and select a width for the specified element." mdn web docs
@mohamedmostafakhudari I'm pretty sure that a width of 100% can cause an overflow to the content and as I said not the same as the initial value auto. Please read "Solutions" section on this resource that is mentioned in the assignment section: https://codyloyd.com/2021/percentages/
@BodiAli I read "If you simply remove the width rule, most html elements will expand horizontally to fill 100% of the horizontal space. (For what it’s worth, this behavior is not the same as sticking width: 100% on it. Notice the horizontal overflow in the example.)".
Okay Let me clarify this a bit, What's causing the overflow? It is not the width of 100% at all, we use it all the time when we want to explicitly make an element fill the horizontal space of its parent. The true reason for the overflowing is that little hidden property padding xD, with no use of border-box box sizing the padding is being considered an extra width above the 100% width and the same for borders.
@mohamedmostafakhudari I think that still counts as the value of 100% to the width property is what makes the overflow not the padding, I know you can get around this with box-sizing but still I'm talking about the default values here if we were to set the value of width to initial or auto this would've not caused an overflow. Also with regard to what you said: "we use it all the time when we want to explicitly make an element fill the horizontal space of its parent" this is what this article is trying to solve! (Avoid using percentages) and this is contradictory to the Kevin Powell course where he suggests that we use percentages as well as saying: "the default width on a block-level element is that they have a width of 100%" well what is the default on an inline element? he doesn't mention it :)
