@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
CSS ๐จ:
-
Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource ๐. -
To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.:
body { min-height: 100vh; }
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
320px
or20rem
to make sure that the component will have a maximum width of320px
on any device, also remove thewidth
property with a percentage value.
CSS Reset ๐:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful