@RanitManik
Posted
Congratulations on completing the challenge! Here is my feedback for you:
-
Centering the Container: Avoid using
position: absolutefor centering elements. Instead, use a more effective method by applyingmin-height: 100vh;to thebodyanddisplay: grid; place-items: center;to center the.container. This ensures better responsiveness and alignment.body { min-height: 100vh; display: grid; place-items: center; } -
Unit Choice for Styling
- Opt for using
reminstead ofpxoremfor properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article.
/* Use rem for Better Scalability */ .container { width: 57.4375rem; /* Equivalent to 919px */ height: 31.3125rem; /* Equivalent to 501px */ font-size: 1rem; /* Equivalent to 16px */ } - Opt for using
If you find this comment helpful please mark it as helpful
Marked as helpful
@VCarames
Posted
@RanitManik @sergrosu
For font-size, it is best to use rem. Using em is rarely necessary for font-size; the only time you should use em is when you need an element's font-size to scale with its parent. Examples of that would be letter-spacing, buttons/anchors, etc...
More Info:
Marked as helpful
@RanitManik
Posted
@VCarames I mistakenly wrote "em" there. As you can see, I suggest using "rem" instead of "px" or "em" for properties like width, height, margin, padding, and font-size.
Marked as helpful
